/* =========================================
   Container Query Grid (Bootstrap Breakpoints)
   Naming: col-c-<breakpoint>-<size>
   Breakpoints:
   sm  >= 576px
   md  >= 768px
   lg  >= 992px
   xl  >= 1200px
   xxl >= 1400px
========================================= */

/* Applies container rules to a given element. */
.row-container {
  container-type: inline-size;
  container-name: bs-row;
}

/* Base column behavior */
[class^="col-c-"],
[class*=" col-c-"] {
  box-sizing: border-box;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* ================= SM ================= */
@container bs-row (min-width: 576px) {
  .col-c-sm-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-c-sm-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-c-sm-3  { flex: 0 0 auto; width: 25%; }
  .col-c-sm-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-c-sm-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-c-sm-6  { flex: 0 0 auto; width: 50%; }
  .col-c-sm-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-c-sm-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-c-sm-9  { flex: 0 0 auto; width: 75%; }
  .col-c-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-c-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-c-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* ================= MD ================= */
@container bs-row (min-width: 768px) {
  .col-c-md-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-c-md-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-c-md-3  { flex: 0 0 auto; width: 25%; }
  .col-c-md-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-c-md-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-c-md-6  { flex: 0 0 auto; width: 50%; }
  .col-c-md-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-c-md-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-c-md-9  { flex: 0 0 auto; width: 75%; }
  .col-c-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-c-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-c-md-12 { flex: 0 0 auto; width: 100%; }
}

/* ================= LG ================= */
@container bs-row (min-width: 992px) {
  .col-c-lg-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-c-lg-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-c-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-c-lg-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-c-lg-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-c-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-c-lg-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-c-lg-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-c-lg-9  { flex: 0 0 auto; width: 75%; }
  .col-c-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-c-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-c-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* ================= XL ================= */
@container bs-row (min-width: 1200px) {
  .col-c-xl-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-c-xl-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-c-xl-3  { flex: 0 0 auto; width: 25%; }
  .col-c-xl-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-c-xl-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-c-xl-6  { flex: 0 0 auto; width: 50%; }
  .col-c-xl-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-c-xl-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-c-xl-9  { flex: 0 0 auto; width: 75%; }
  .col-c-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-c-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-c-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* ================= XXL ================= */
@container bs-row (min-width: 1400px) {
  .col-c-xxl-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-c-xxl-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-c-xxl-3  { flex: 0 0 auto; width: 25%; }
  .col-c-xxl-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-c-xxl-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-c-xxl-6  { flex: 0 0 auto; width: 50%; }
  .col-c-xxl-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-c-xxl-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-c-xxl-9  { flex: 0 0 auto; width: 75%; }
  .col-c-xxl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-c-xxl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-c-xxl-12 { flex: 0 0 auto; width: 100%; }
}