/* CSS for large screens */
@media (width >= 45rem) {
	/* Grid wrapping the entire page */
	body {
		width: 60rem;
		gap: 0.5rem 3rem;
	}

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

	#index-menu {
		grid-template-columns: max-content max-content;
		justify-content: space-between;
	}

	#comments .comment {
		grid-template-areas:
			"avatar name aside"
			"avatar post post"
			". interactions interactions";
		grid-template-columns: min-content auto min-content;
	}

	/* End of Media width condition */
}