/**
 * Sistema de 24 colunas responsivo
 *
 * Breakpoints:
 *   xs    < 480px    (padrão mobile-first)
 *   sm    ≥ 576px
 *   md    ≥ 768px
 *   lg    ≥ 992px
 *   xl    ≥ 1200px
 *   xxl   ≥ 1600px
 *   xxxl  ≥ 1920px
 */

:root {
  --bp-sm:    576px;
  --bp-md:    768px;
  --bp-lg:    992px;
  --bp-xl:   1200px;
  --bp-xxl:  1600px;
  --bp-xxxl: 1920px;
  --grid-cols: 24;
}

/* ── xs (padrão — mobile first, sem media query) ── */
.col-xs-24 { width: 100%; }
.col-xs-16 { width: calc(16 / 24 * 100%); }
.col-xs-12 { width: calc(12 / 24 * 100%); }
.col-xs-10 { width: calc(10 / 24 * 100%); }
.col-xs-8  { width: calc( 8 / 24 * 100%); }
.col-xs-6  { width: calc( 6 / 24 * 100%); }

/* ── sm ≥ 576px ── */
@media (min-width: 576px) {
  .col-sm-24 { width: 100%; }
  .col-sm-16 { width: calc(16 / 24 * 100%); }
  .col-sm-12 { width: calc(12 / 24 * 100%); }
  .col-sm-10 { width: calc(10 / 24 * 100%); }
  .col-sm-8  { width: calc( 8 / 24 * 100%); }
  .col-sm-6  { width: calc( 6 / 24 * 100%); }
}

/* ── md ≥ 768px ── */
@media (min-width: 768px) {
  .col-md-24 { width: 100%; }
  .col-md-16 { width: calc(16 / 24 * 100%); }
  .col-md-12 { width: calc(12 / 24 * 100%); }
  .col-md-10 { width: calc(10 / 24 * 100%); }
  .col-md-8  { width: calc( 8 / 24 * 100%); }
  .col-md-6  { width: calc( 6 / 24 * 100%); }
}

/* ── lg ≥ 992px ── */
@media (min-width: 992px) {
  .col-lg-24 { width: 100%; }
  .col-lg-16 { width: calc(16 / 24 * 100%); }
  .col-lg-12 { width: calc(12 / 24 * 100%); }
  .col-lg-10 { width: calc(10 / 24 * 100%); }
  .col-lg-8  { width: calc( 8 / 24 * 100%); }
  .col-lg-6  { width: calc( 6 / 24 * 100%); }
}

/* ── xl ≥ 1200px ── */
@media (min-width: 1200px) {
  .col-xl-24 { width: 100%; }
  .col-xl-16 { width: calc(16 / 24 * 100%); }
  .col-xl-12 { width: calc(12 / 24 * 100%); }
  .col-xl-10 { width: calc(10 / 24 * 100%); }
  .col-xl-8  { width: calc( 8 / 24 * 100%); }
  .col-xl-6  { width: calc( 6 / 24 * 100%); }
}

/* ── xxl ≥ 1600px ── */
@media (min-width: 1600px) {
  .col-xxl-24 { width: 100%; }
  .col-xxl-16 { width: calc(16 / 24 * 100%); }
  .col-xxl-12 { width: calc(12 / 24 * 100%); }
  .col-xxl-10 { width: calc(10 / 24 * 100%); }
  .col-xxl-8  { width: calc( 8 / 24 * 100%); }
  .col-xxl-6  { width: calc( 6 / 24 * 100%); }
}

/* ── xxxl ≥ 1920px ── */
@media (min-width: 1920px) {
  .col-xxxl-24 { width: 100%; }
  .col-xxxl-16 { width: calc(16 / 24 * 100%); }
  .col-xxxl-12 { width: calc(12 / 24 * 100%); }
  .col-xxxl-10 { width: calc(10 / 24 * 100%); }
  .col-xxxl-8  { width: calc( 8 / 24 * 100%); }
  .col-xxxl-6  { width: calc( 6 / 24 * 100%); }
}