/* CSS for small screens */
@media (width >= 0) {
	/* Grid wrapping the entire page */
	body {
		gap: 0;
		margin: auto;
	}

	body,
	body > header,
	body > article,
	#item-index,
	#comments {
		max-width: 90vw;
	}

	body > header {
		grid-auto-flow: row;
		row-gap: 1rem;
		justify-items: center;
	}

	body > header > nav#social > ul {
		grid-auto-flow: row;
	}

	#index-menu {
		justify-items: center;
		row-gap: 1rem;
	}

	#comments .comment {
		row-gap: 0.5em;
		grid-template-areas:
			"avatar name"
			"avatar aside"
			"avatar post"
			". interactions";
	}

	#comments .comment aside {
		justify-self: unset;
	}

	/* End of Media width condition */
}