@layer master { .templateBlocks { .container { .grid { .splide[data-splide-state="disabled"] { .splide__list { display: flex; gap: var(--gutter); flex-wrap: wrap; } } .splide[data-splide-state="mobile"] { .splide__list { @media (min-width: 56em) { display: flex; gap: var(--gutter); flex-wrap: wrap; } @media (--min-fablet) { display: flex; gap: var(--gutter); flex-wrap: wrap; } } } .splide[data-splide-state="mobile"], .splide[data-splide-state="disabled"] { .splide__list { .item { width: 100%; @media (min-width: 56em) { .slides-1 & { width: 100%; } .slides-2 & { width: calc(50% - var(--gutter)); } .slides-3 & { width: calc(33.3333% - var(--gutter)); } .slides-4 & { width: calc(25% - var(--gutter)); } } @media (--min-fablet) { .slides-1 & { width: 100%; } .slides-2 & { width: calc(50% - var(--gutter)); } .slides-3 & { width: calc(33.3333% - var(--gutter)); } .slides-4 & { width: calc(25% - var(--gutter)); } } } } } } } } }