/* =========================================
  masonry.css
========================================= */

.masonry-layout {
    container-type: inline-size;
    width: 100%;
}

.masonry {
    --masonry-gap: var(--component-gap-sm, 12px);
    column-gap: var(--masonry-gap);
    column-fill: balance;
}

    /* карточки */

    .masonry > * {
        break-inside: avoid;
        margin-bottom: var(--masonry-gap);
        width: 100%;
        display: inline-block;
        transition: transform 0.25s ease;
    }

/* =========================================
   MOBILE (Masonry fallback)
========================================= */

@media (max-width: 479px) {
    .masonry {
        column-count: 1;
    }
}

/* =========================================
   RATIO SYSTEM
========================================= */

.masonry-card {
    --ratio: 3/5;
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 480px;
}

/* варианты ratio */

.masonry-card--r45 {
    --ratio: 4/5;
}

.masonry-card--r35 {
    --ratio: 3/5;
}

.masonry-card--r23 {
    --ratio: 2/3;
}

/* media использует ratio */

.media {
    aspect-ratio: var(--ratio);
}

/* =========================================
   SWIPER OVERRIDE
========================================= */

.products.swiper {
    width: 100%;
}

    .products.swiper .masonry-card {
        --ratio: 3/5;
    }

/* =========================================
   CONTAINER RESPONSIVE
========================================= */

@container (min-width: 480px) {
    .masonry {
        column-count: 2;
    }
}

@container (min-width: 900px) {
    .masonry {
        column-count: 2;
    }
}

@container (min-width: 1300px) {
    .masonry {
        column-count: 3;
    }
}


/* =========================================
   Masonry Layout
========================================= */
/*.masonry-layout {
    container-type: inline-size;
    width: 100%;
}

.masonry {
    --masonry-gap: 16px;
    column-gap: var(--masonry-gap);
    column-fill: balance;
}

.masonry > * {
    break-inside: avoid;
    margin-bottom: var(--masonry-gap);
    width: 100%;
    display: inline-block;
    background: #f3f3f3;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 0px;
    transition: transform 0.25s ease;
}*/

/* MOBILE */
/*@media (max-width: 479px) { .masonry { column-count: 1; } }*/

/* FALLBACK */
/*@media (min-width: 480px) { .masonry { column-count: 2; } }
@media (min-width: 1300px) { .masonry { column-count: 3; } }*/

/* CONTAINER QUERIES */
/*@container (min-width: 480px) { .masonry { column-count: 2; } }
@container (min-width: 900px) { .masonry { column-count: 2; } }
@container (min-width: 1300px) { .masonry { column-count: 3; } }

.masonry-card {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 200px;
}*/