.blogPreview {
	padding: 3rem 0 6rem;
}

.blogPreviewTitle {
	font-size: 3em;
	text-transform: uppercase;
}

.blogPostsContainer {
	max-width: 1200px !important;
}

.blogPost {
	align-items: flex-end;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	display: flex;
	height: 100%;
	position: relative;
	width: 100%;
}

.blogPost::before {
	background-color: rgba(0, 0, 0, .6);
	border-radius: 2px;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: all .1s ease-in;
	width: 100%;
}

.blogPost:hover.blogPost::before {
	background-color: rgba(0, 0, 0, .55);
}

.blogPostImg {
	border-radius: 2px;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.blogPostContent {
    color: #FFF;
    display: flex;
    flex-direction: column;
	height: 100%;
    justify-content: end;
	position: absolute;
	width: 100%;
}

.blogPostSide {
	margin-top: 1rem !important;
}

@media (min-width: 768px) {
	.blogPostSide {
		margin-top: 0 !important;
	}
}