/* ==========================================================================
   Homepage blog
   Block: .home-blog
   ========================================================================== */

.home-blog {
	padding-bottom: var(--space-11);
}

.home-blog__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.home-blog__grid {
	display: grid;
	gap: var(--space-6);
}

.home-blog__media {
	display: block;
	overflow: hidden;
	margin-bottom: var(--space-4);
	border-radius: 1rem 1rem 0 0; /* 16px */
}

.home-blog__media img {
	width: 100%;
	height: 12.375rem; /* 198px */
	object-fit: cover;
}

.home-blog__date {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.home-blog__date img {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.home-blog__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.3333;
}

.home-blog__title a {
	color: inherit;
	text-decoration: none;
}

.home-blog__title a:hover,
.home-blog__title a:focus-visible {
	color: var(--color-primary);
}

.home-blog__copy {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.446; /* 20.25px */
}

.home-blog__link {
	color: var(--color-primary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.home-blog__link::after {
	content: " →";
}

@media (min-width: 48rem) {
	.home-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.home-blog__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}