/* ============================================================================
   SCS — Bootstrap 3 grid bridge
   ----------------------------------------------------------------------------
   Loaded BEFORE bootstrap.min.css, and that order is the whole point.

   Bootstrap 3's .col-xs-* is the base width; a .col-md-* on the same element is
   meant to override it on wider screens. Bootstrap 5 has no .col-xs-*, so these
   rules supply it — but if they were loaded after Bootstrap, they would win the
   cascade against .col-md-*, because both are single-class selectors and source
   order decides. A `col-xs-6 col-md-3` would then stay at 50% forever, and
   every four-across row in the application would render two-across.

   Loading first restores the intended precedence: these define the base, and
   Bootstrap's breakpoint classes override them further up.
   ========================================================================= */

.col-xs-1,  .col-xs-2,  .col-xs-3,  .col-xs-4,
.col-xs-5,  .col-xs-6,  .col-xs-7,  .col-xs-8,
.col-xs-9,  .col-xs-10, .col-xs-11, .col-xs-12 {
  position: relative;
  flex: 0 0 auto;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
}

.col-xs-1  { width: 8.33333333%; }
.col-xs-2  { width: 16.66666667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.33333333%; }
.col-xs-5  { width: 41.66666667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.33333333%; }
.col-xs-8  { width: 66.66666667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }

/* Bootstrap 3 offsets, same reasoning. */
.col-xs-offset-1  { margin-left: 8.33333333%; }
.col-xs-offset-2  { margin-left: 16.66666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.33333333%; }
.col-xs-offset-6  { margin-left: 50%; }