.featured-posts-placeholder {
	display: grid;
	grid-template-rows: 66% 1fr;
	gap: 20px;
	height: 500px;
	width: 100%;
	max-width: 100%;
}

.featured-posts-placeholder > .featured-posts-big-container, .featured-posts-placeholder > .featured-posts-big-container > .featured-post-big, .featured-posts-placeholder > .featured-posts-small-container, .featured-posts-placeholder > .featured-post-small, .featured-posts-placeholder .image {
	width: 100%;
	height: 100%;
	position: relative;
}

.featured-posts-placeholder > .featured-posts-small-container {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.featured-posts-placeholder > .featured-posts-small-container > .featured-post-small {
	position: relative;
	width: 50%;
}

.featured-posts-placeholder .text {
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 100%;
	padding: 20px;
	gap: 20px;
	bottom: 20px;
}

.featured-posts-placeholder .featured-post-big > .text > .category {
	display: block;
	width: 100px;
	height: 30px;
}

.featured-posts-placeholder .featured-post-big > .text > .title {
	height: 60px;
	width: 100%;
}

.featured-posts-placeholder .featured-post-small > .text > .category {
	display: block;
	width: 100px;
	height: 20px;
}

.featured-posts-placeholder .featured-post-small > .text > .title {
	height: 40px;
	width: 100%;
}

@media (min-width: 768px) {
	.featured-posts-placeholder {
		grid-template-rows: auto;
		grid-template-columns: 66% 1fr;
	}

	.featured-posts-placeholder > .featured-posts-small-container {
		flex-direction: column;
	}

	.featured-posts-placeholder > .featured-posts-small-container > .featured-post-small {
		width: auto;
		height: 50%;
	}
}