.blog-index {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: row;
	grid-gap: 30px;
}

.blog-index .blog-index-item {
	position: relative;
	min-height: 500px;
	padding: 20px;
	display: grid;
	font-size: 20px;
	place-items: center;
	text-align: center;
	color: #fff;
	transition: 0.5s;
}

.blog-index-item a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: 50%;
}

.news-index-item-content {
	position: absolute;
	bottom: 0;
	margin-bottom: 0;
	color: #fff;
	width: auto;
	float: left;
}


.news-index-item-title {
	float: left;
	background: rgba(var(--dark-blue), 0.9);
	color: #fff;
	padding: 15px;
	margin-bottom: 0;
	font-size: 24px;
	font-family: "utopia-std-display", serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.5px;
}

@media (max-width: 2200px) {
	.blog-index {
		grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
		grid-template-rows: minmax(450px, auto);
	}

	.blog-index .blog-index-item {
		min-height: 450px;
	}
}

@media (max-width: 1950px) {
	.blog-index {
		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
		grid-template-rows: minmax(400px, auto);
	}

	.blog-index .blog-index-item {
		min-height: 400px;
	}
}

@media (max-width: 1750px) {
	.blog-index {
		grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
		grid-template-rows: minmax(380px, auto);
	}

	.blog-index .blog-index-item {
		min-height: 380px;
	}
}

@media (max-width: 1600px) {
	.blog-index {
		grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
		grid-template-rows: minmax(370px, auto);
	}
}

@media (max-width: 1214px) {
	.blog-index .blog-index-item {
		min-height: 45vw;
	}
}

@media (max-width: 1199px) {
	.blog-index {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-template-rows: minmax(300px, auto);
	}
}

@media (max-width: 1199px) {
	.blog-index {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(246px, auto);
	}
}

@media (max-width: 768px) {
	.blog-index {
		display: block;
	}

	.blog-index .blog-index-item:nth-child(1),
	.blog-index .blog-index-item:nth-child(2),
	.blog-index .blog-index-item:nth-child(3),
	.blog-index .blog-index-item:nth-child(4),
	.blog-index .blog-index-item:nth-child(5),
	.blog-index .blog-index-item:nth-child(6),
	.blog-index .blog-index-item:nth-child(7) {
		display: block;
		margin-bottom: 15px;
	}

	.blog-index .blog-index-item {
		min-height: 90vw;
	}
}