/* ================================================
Component: Recipe Card
Path: components/reusable/recipe-card/style.css
================================================ */
:is(body, .is-preview) {
	.recipe-card {
		flex: 1 1 100%;
		min-width: 0;
	}
	.recipe-card__link {
		display: flex;
		flex-direction: column;
		gap: 12px;
		text-decoration: none;
		color: inherit;
		text-align: center;
		transition: all var(--transition-slow);
	}
	.recipe-card__link:hover {
		transform: translateY(-3px);
	}
	.recipe-card__media {
		position: relative;
		width: 100%;
		aspect-ratio: 298 / 300;
		overflow: hidden;
		border-radius: 225px 225px 5px 5px;
	}
	.recipe-card__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.recipe-card__img--main {
		transition: transform var(--transition-slow);
	}
	.recipe-card__link:hover .recipe-card__img--main,
	.recipe-card__link:focus-within .recipe-card__img--main {
		transform: scale(1.07);
	}
	.recipe-card__img--hover {
		display: none;
	}
	.recipe-card__content {
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);
	}
	.recipe-card__title {
		font-family: var(--font-display);
		letter-spacing: 0;
		color: #5f514d;
		margin: 0;
		transition: all var(--transition-slow);
		font-size: 18px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
	}
	.recipe-card__tags {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--gap-sm);
	}
	.recipe-card__tag {
		display: inline-block;
		padding: 4px 13px;
		border-radius: 14px;
		font-family: var(--font-primary);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		line-height: normal;
		letter-spacing: 0;
	}
	.recipe-card__tag--category {
		background-color: #d9d3cf;
		color: var(--color-brown, #685040);
	}
	@media (min-width: 768px) {
		.recipe-card__link {gap: var(--gap-lg);}
		.recipe-card__title {font-size: var(--font-size-xl);line-height: 36px;}
		.recipe-card__content {gap: var(--gap-sm);}
	}
}