#zine-container {
	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;
		}
	}
}

@media (max-width: 650px) {
	#zine-container > li:has(img) {
		display: block;

		img {
			margin-block-start: .5rem;
		}
	}
}