.article-list {
	/*noinspection CssInvalidFunction*/
	--label-background: light-dark(beige, color-mix(in srgb, beige, black 75%));
	--shadow: color-mix(in srgb, var(--label-background), black 20%);
	--original-hue: var(--hue);
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	padding: 0;
	
	li {
		--pane-background: color-mix(in srgb, var(--reverse-highlight), var(--page-colour) 50%);
		align-items: center;
		aspect-ratio: 63 / 88;
		container-name: article-item;
		container-type: inline-size;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		justify-content: center;
		overflow: hidden;
		padding: 7%;
		position: relative;
		text-align: center;
		transition: translate 0.2s;
		
		&:hover {
			translate: 0 -0.5em;
		}
		
		.title,
		.date {
			z-index: 3;
		}
		
		/*noinspection CssNoGenericFontName*/
		.title {
			align-items: center;
			color: inherit;
			display: flex;
			flex-grow: 1;
			font-family: var(--title-font);
			font-size: 2rem;
			justify-content: center;
			text-decoration: none;
			z-index: 4;
			
			@container article-item (width > 0px) {
				font-size: 12cqw;
			}
			
			&:after {
				content: "";
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
			}
		}
		
		.date {
			align-self: end;
			font-size: 0.8rem;
			text-align: right;
			
			@container article-item (width > 0px) {
				font-size: 6cqw;
			}
		}
	}
}

.article-date {
	display: grid;
	font-size: 0.8rem;
	gap: 0 0.5em;
	grid-template-columns: auto auto;
	margin-top: -1em;
	opacity: 0.7;
	width: fit-content;
	
	dd {
		margin: 0;
	}
}

.article-navigation {
	display: flex;
	justify-content: space-between;
}