Make CSS modular

public/css/post-list.css

@@ -0,0 +1,91 @@
+/* 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;
+	}
+}