.beauty-product-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 28px 12px;

}


.beauty-product-card__image {

    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: 22px;

    background: #f5f2ef;

}


.beauty-product-card__image img {

    height: 100%;

    object-fit: cover;

}


.beauty-product-badge {

    position: absolute;

    top: 12px;

    left: 12px;

    z-index: 2;

    padding: 7px 10px;

    background: white;

    border-radius: 999px;

    font-size: 0.6rem;

    font-weight: 800;

}


.beauty-product-card h3 {

    margin: 12px 3px 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1rem;

    font-weight: 500;

}


.beauty-product-card p {

    margin: 6px 3px 0;

    color: #777;

    font-size: 0.8rem;

}


@media (min-width: 768px) {

    .beauty-product-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 18px;

    }

}