@media screen and (max-width: 1200px) {
	header {
		flex-flow: column;
		align-items: flex-start;
		padding: 20px 50px 25px 50px;
	}

	footer,
	#page,
	#blog,
	#blog-post {
		padding: 20px 50px;
	}

	#menuToggle {
		display: block;
	}

	#main-menu {
		align-self: flex-end;
		transition: all 0.2s linear;
	}

	#main-menu ul li {
		float: none;
		text-align: right;

		transition: all 0.2s linear;

		height: 0;
		padding: 0;
		overflow: hidden;
	}

	#main-menu-toggled:checked ~ header #main-menu ul li {
		height: 35px;
	}

	#main-menu ul li a {
		padding-right: 0;
	}

	#main-menu-toggled:checked ~ header #main-menu {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	/**
	 * Blog Posts
	 */
	.blog-posts,
	.front-page-blogposts .blog-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 50px;
	}
}

@media screen and (max-width: 996px) {
	.category-info {
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
		margin-top: 20px;
		margin-bottom: 0;
	}

	.category-info .category-description {
		order: 2;
	}
	.category-info .category-image {
		order: 1;
	}

	.category-image img {
		height: auto;
		width: 100%;
		position: relative;
	
		object-fit: cover;
	}
}

@media screen and (max-width: 768px) {
	.blog-posts,
	.front-page-blogposts .blog-posts {
		grid-template-columns: repeat(1, 1fr);
	}

	header,
	footer,
	#page,
	#blog,
	#blog-post {
		padding: 10px 40px;
	}

	header {
		padding-bottom: 15px;
	}

	#menuToggle {
		top: 20px;
		right: 40px;
	}

	#page-content {
		text-align: left;
	}

	footer {
		flex-flow: row wrap;
	}

	.blog-posts .post-content {
		max-height: 400px;
	}

	.blog-posts .post::after {
		top: 600px;
	}
}

@media screen and (max-width: 500px) {
	header,
	footer,
	#page {
		padding: 10px 25px;
	}

	header {
		padding-bottom: 15px;
	}

	#site-name {
		font-size: 1.9rem;
		line-height: 2.5rem;
	}

	#menuToggle {
		top: 15px;
		right: 20px;
	}

	#menuToggle span {
		width: 45px;
		height: 4px;
	}

	#main-menu-toggled:checked ~ header #menuToggle span:last-child {
		margin-top: 13px;
	}
}

@media screen and (max-width: 370px) {
	#site-name {
		font-size: 1.5rem;
	}
}