.grid__container{
    container: grid / inline-size;
    position: relative;
    z-index: 1;
}

.grid{
    --_columns: 1;

    /* padding-inline: 24px; */
    padding-inline: 12px;
    padding-block: 40px;
    display: grid;
    grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
    gap: 24px;
}

@container grid (min-width: 375px) and (max-width: 768px){
    .grid{
        &:has(> .product-card__container > .product-card[micro]){
            --_columns: 2;
            gap: 12px;
        }
    }
}

@container grid (min-width: 768px){
    .grid[columns="4"]{
        --_columns: 2;

        padding-inline: 48px;
    }
}

@container grid (min-width: 1024px){
    .grid[columns="4"]{
        --_columns: 3;
    }
}

@container grid (min-width: 1280px){
    .grid[columns="4"]{
        --_columns: 4;

        padding-inline: 96px;
    }
}

@container grid (min-width: 1440px){
    .grid[columns="4"]{
        --_columns: 4;

        padding-inline: calc(50% - 1248px / 2);
    }
}