.journal-wrapper {
	container-name: journals;
	container-type: inline-size;

	.journals {
		h2,
		h3 {
			margin: 0;
		}
	}
	.journal-listings {
		gap: 3rem 1rem;

		.journal-item {
			flex: 1 1 100%;
			overflow: hidden;
			gap: 0.5rem;
			border: 1px solid #ddd;

			&:has(a:hover) {
				img {
					transform: scale(1.03);
				}
			}

			.journal-image,
			img {
				max-width: 100%;
				width: 100%;
				height: auto;
				transition: transform 0.2s ease-in-out;
			}
			.journal-image {
				overflow: hidden;
			}

			h3,
			.journal-link {
				padding: 0 1rem;
			}
			h3 {
				font-size: calc(
					(var(--font-min__h5) * 1px) +
						(var(--font-max__h5) - var(--font-min__h5)) *
						(100vw - calc(var(--min-size) * 1px)) /
						(var(--max-size) - var(--min-size))
				);
			}
			.journal-link {
				padding-bottom: 1rem;
			}
		}
	}
}

@container journals (min-width: 500px) {
	.journal-wrapper {
		.journal-listings {
			gap: 3rem 2rem;

			.journal-item {
				flex: 0 1 calc(50% - 1rem);
			}
		}
	}
}
@container journals (min-width: 900px) {
	.journal-wrapper {
		.journal-listings {
			gap: 3rem 3rem;

			.journal-item {
				flex: 0 1 calc(33.333% - 2rem);
			}
		}
	}
}