@layer components {
    .snap-track {
        display: grid;
        grid-auto-flow: column;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: theme('spacing.6');
    }

    .snap-slider [data-track] > * {
        scroll-snap-align: start;
    }

    [--snap-cols\:1] { grid-auto-columns: calc(100%); }
    [--snap-cols\:2] { grid-auto-columns: calc((100% - theme('spacing.6')) / 2); }
    [--snap-cols\:3] { grid-auto-columns: calc((100% - theme('spacing.6')) / 3); }
    [--snap-cols\:4] { grid-auto-columns: calc((100% - theme('spacing.6')) / 4); }
    [--snap-cols\:5] { grid-auto-columns: calc((100% - theme('spacing.6')) / 5); }
}