.hero {
    margin-block: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-inline: auto;

    --gap: 0.5rem;
    --padding: 0.5rem;
    gap: var(--gap);
    padding: var(--padding);
}

.recipe-card {
    display: block;
    text-decoration: none;
    color: inherit;
    /* border-radius: 1rem; */
    /* overflow: hidden; */
    --radius: 1rem;
    display: flex;
    flex-direction: column;
}

.recipe-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.recipe-card__content {
    --padding: 0.75rem;
    --padding-top: 0.5rem;
    background-color: white;
    padding: var(--padding-top) var(--padding) var(--padding) var(--padding);
    border: 2px solid var(--color-border);
    border-top: 0;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    flex-grow: 1;
}

.recipe-card__meta {
    display: flex;
    align-items: flex-start;
    column-gap: 0.75rem;
    justify-content: space-between;
}

.recipe-card__meta-left {
    display: flex;
    column-gap: 0.75rem;
    flex-wrap: wrap;
}

.recipe-card__time {
    display: flex;
    align-items: center;
    column-gap: 0.25em;
}

.recipe-card__meta-text {
    font-size: 0.875rem;
}

.recipe-card__rating i {
    color: hsl(0 0% 60%);
}

.recipe-card__leaf {
    color: hsl(140 50% 35%);
}

.recipe-card__title {
    margin-top: 0.25rem;
    /* font-size: 1.125rem; */
    font-weight: 600;
    hyphens: auto;
}

@media (min-width: 375px) {
    .recipe-card__content {
        --padding: 1rem;
    }
}

@media (min-width: 480px) {
    .recipe-grid {
        --min-col-width: 12.75rem;
        grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
        --padding: 1.5rem;
        --gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .recipe-grid {
        --min-col-width: 14rem;
    }
}