/* Responsive column layout for the universal slider, using container queries.
   Previously lived only in list.html's inline <style> — see
   server/static/js/universal-containers.js for why that's insufficient once
   HTMX menu navigation is involved (list.html's <style> block doesn't travel
   with it either). Loaded in every shell's <head> alongside that file. */
#universal-slider-container {
    container-type: inline-size;
    container-name: slider;
}

/* Default: single column (<1000px) */
#universal-slider-container .grid {
    grid-template-columns: 1fr !important;
}

/* 2 columns when container is 1000px-1399px */
@container slider (min-width: 1000px) {
    #universal-slider-container .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 3 columns when container is >=1400px (wide slider) */
@container slider (min-width: 1400px) {
    #universal-slider-container .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
