start adding images

css/zines.css

@@ -1,51 +1,72 @@
 #zine-container {
-  padding: 0;
+	padding: 0;
+
+	> li {
+		list-style: none;
+		border-bottom: solid;
+		border-left: solid;
+		border-radius: .25rem;
+		padding: 0 .4rem .4rem;
+		margin-bottom: 2rem;
+
+		&:has(img) {
+			display: grid;
+			grid-template-areas: "text img";
+			gap: .75rem;
+			grid-template-columns: 3fr 2fr;
+
+			img {
+				border-radius: .2rem;
+			}
+		}
+	}
+
+	h2,
+	p {
+		border: none;
+		display: inline;
+	}
+
+	h2 a {
+		background-color: var(--color-header);
+		line-height: 135%;
+	}
+
+	h3 {
+		background-color: var(--color-warn);
+		color: var(--color-text);
+		border-radius: .2rem;
+		padding: 0 .2rem;
+		text-align: right;
+		line-height: 150%;
+		margin: .25rem 0 .75rem 0;
+	}
+
+	blockquote {
+		margin: 0;
+		color: var(--color-header);
+
+		p {
+			display: block;
+			margin-block: .75rem;
+		}
+
+		p:first-child {
+			margin-top: .5rem;
+		}
+
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
 }
 
-#zine-container > li {
-  list-style: none;
-  border-bottom: solid;
-  border-left: solid;
-  border-radius: 4px;
-  padding: 0 .4rem .4rem;
-  margin-bottom: 2rem;
-}
+@media (max-width: 650px) {
+	#zine-container > li:has(img) {
+		display: block;
 
-#zine-container h2,
-#zine-container p {
-  border: none;
-  display: inline;
-}
-
-#zine-container h2 a {
-  background-color: var(--color-header);
-  line-height: 135%;
-}
-
-#zine-container h3 {
-  background-color: var(--color-warn);
-  color: var(--color-text);
-  border-radius: 3px;
-  padding: 0 .2rem;
-  text-align: right;
-  line-height: 150%;
-  margin: .25rem 0 .75rem 0;
-}
-
-#zine-container blockquote {
-  margin: 0;
-  color: var(--color-header);
-}
-
-#zine-container blockquote p {
-	display: block;
-	margin-block: .75rem;
-}
-
-#zine-container blockquote p:first-child {
-	margin-top: .5rem;
-}
-
-#zine-container blockquote p:last-child {
-	margin-bottom: 0;
+		img {
+			margin-block-start: .5rem;
+		}
+	}
 }