@import "imports/root.css";
@import "imports/type.css";
@import "imports/tables.css";
@import "imports/forms.css";
@import "imports/buttons.css";
@import "imports/dropdown.css";
@import "imports/nav.css";
@import "imports/navbar.css";
@import "imports/card.css";
@import "imports/accordion.css";
@import "imports/alert.css";
@import "imports/modal.css";
@import "imports/carousel.css";
@import "imports/utility.css";
@import "imports/tab-panel.css";
@import "imports/social.css";
@import "imports/background.css";
@import "imports/color.css";
@import "imports/color-buttons.css";
@import "imports/overlay.css";
@import "imports/datepicker.css";
@import "imports/hero.css";
@import "imports/blog.css";
@import "imports/timeline.css";
@import "imports/feature.css";
@import "imports/errors.css";
@import "imports/support.css";
@import "imports/scaffolding.css";
@import "imports/quote.css";

/*https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/*/





/* (https://www.youtube.com/watch?v=R1kiLX-Z-Io) */

.overflow-scroller.test {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.overflow-scroller.test > * {
    scroll-snap-align: center;
}


.auto-grid.test {
    /* Columns will be at least 250px wide */
    --min-col-width: 250px;
    /* The trick to use whichever is smaller, based on viewport */
    --adj-min-width: min(var(--min-col-width), 100%);
    /**/
    display: grid;
    gap: 1rem;
    /* Columns will be min 250px or 100% of remaining space, but grow to fill available space */
    grid-template-columns: repeat(auto-fit, minmax(var(--adj-min-width), 1fr));
}









/*@layer framework {
    @layer reset, base, components;
}


@layer framework.reset {
    
}*/