main {
	max-inline-size: none;
	gap: 3rem;
}

aside {
	padding-inline: 1rem;
	background: linear-gradient(light-dark(var(--orange), var(--blue)), transparent);

	ul {
		display: flex;
		gap: 1.5rem;
		list-style: none;
		margin: 0;
	}

	a {
		color: light-dark(var(--black), var(--white));
	}
}

@media (min-width: 45rem) {
	main {
		flex-direction: row;
		gap: 2rem;
	}

	aside {
		min-inline-size: 10rem;
		max-inline-size: 30%;
		block-size: fit-content;
		padding-block-start: 1rem;
		padding-block-end: 5rem;

		ul {
			display: block;
			list-style-type: "▸ ";
			list-style-position: inside;
		}
	}
}

article {
	max-inline-size: 75ch;

	header {
		margin-block-end: 2rem;

		ul {
			margin-inline-start: 0;

			li {
				list-style: none;
				margin-block: 0;
			}
		}
	}

	.readable {
		margin-inline: auto;

		@media (max-width: 45rem) {
			max-width: calc(100vw - 1.6rem);
		}
	}
}

#about-post {
	margin-block-start: 8rem;
	font-size: 0.9rem;
	font-style: italic;

	h2 {
		font-size: 1em;
		line-height: inherit;
	}

	* + h2 {
		margin-block-start: 1rem;
	}

	p {
		margin-block-start: 0;
	}
}