.components__blog_card {
	min-width: 10rem;
	aspect-ratio: 3 / 4;
	display: flex;
	flex-direction: column;
	padding: var(--_gap-half);
	gap: var(--_gap);
	box-shadow: 0 0 0.4rem 0.2rem var(--_translucent);
	border: var(--_border-size) solid transparent;
	background-repeat: no-repeat;
	background-size: contain;

	&:has(a:focus-visible),
	&:hover {
		border: var(--_border-size) solid var(--_accent-color);
	}

	& h3 {
		margin: 0;
	}

	& a {
		outline: none;
	}
}

.components__blog_card__spacer {
	height: 50%;
}

.components__blog_card__text {
	text-wrap: balance;
	flex-grow: 1;
}

.components__blog_card__footer {
	height: fit-content;
	display: flex;
	gap: var(--_gap);
	justify-content: space-between;
}