/* Posts list */
.postlist,
.links-nextprev {
	container: postlist / inline-size;
}
.postlist-item {
	align-items: flex-start;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	width: 100%;
}
.postlist-item-container {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--space-s);
}
.post-image {
	width: var(--space-4xl);
	height: var(--space-4xl);
	object-fit: cover;
	object-position: 50% 50%;
}
.post-image-container {
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	height: var(--space-4xl);
	max-height: var(--space-4xl);
	overflow: hidden;
	width: var(--space-4xl);
}

.postlist-date,
.postlist-item:before {
	color: var(--color-gray-90);
	font-size: var(--meta-font-size);
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: var(--step-5);
	padding-right: 0.5em;
	text-decoration: none;
}

.postlist-link p {
	background-color: var(--color-gray-90);
	border-radius: 100px;
	color: var(--background-color);
	font-family: var(--font-family-ui);
	font-size: var(--step--2);
	font-variation-settings: var(--font-variation-ui);
	letter-spacing: var(--ui-letter-spacing);
	margin-top: calc(var(--space-3xs) * -1);
	padding-left: var(--space-xs);
	padding-right: var(--space-xs);
	text-transform: uppercase;
	width: max-content;
}
.post-copy {
	display: flex;
	flex-flow: column wrap;
}

@container postlist (max-width: 500px) {
	.postlist-item {
		flex-flow: column wrap;
	}
	.post-image-container {
		margin-left: 0;
		min-height: var(--space-10xl);
		width: 100%;
	}
	.post-image-container img.post-image {
		width: 100cqw;
		height: var(--space-10xl);
	}
	.postlist-link {
		padding: 0;
	}
	.postlist-link h3 {
		padding-top: var(--space-m);
	}
	.postlist-link p {
		margin-top: var(--space-xs);
	}
	.post-metadata {
		padding-bottom: 0;
	}
}