/* =========================================
   NBTX GRID SYSTEM (Grid-first)
   Keeps Bootstrap-like class names for compatibility
   ========================================= */

/* Foundation */
*,
*::before,
*::after{
  box-sizing: border-box;
}

img{
  max-width: 100%;
  height: auto;
  display:block;
}

/* Containers */
.container{
  width: 100%;
  max-width: var(--container-max, 1140px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad, 15px);
  padding-right: var(--container-pad, 15px);
}

.container-fluid{
  width: 100%;
  padding-left: var(--container-pad, 15px);
  padding-right: var(--container-pad, 15px);
}

/* If you want classic breakpoint max-widths, keep these.
   If you're using --container-max in :root already, you can remove these later. */
@media (min-width: 576px){
  .container{ max-width: 540px; }
}
@media (min-width: 768px){
  .container{ max-width: 720px; }
}
@media (min-width: 992px){
  .container{ max-width: 960px; }
}
@media (min-width: 1200px){
  .container{ max-width: 1140px; }
}

/* Row = 12-col CSS grid */
.row{
  --gutter-x: 30px; /* total gutter; matches your old -15/+15 pattern */
  --gutter-y: 16px;

  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter-x);
  row-gap: var(--gutter-y);
}

/* Make children behave */
.row > *{
  min-width: 0;
}

/* Column base */
[class*="col-"],
[class^="col-"]{
  grid-column: 1 / -1; /* default full width */
}

/* XS (default) */
.col-1{ grid-column: span 1; }
.col-2{ grid-column: span 2; }
.col-3{ grid-column: span 3; }
.col-4{ grid-column: span 4; }
.col-5{ grid-column: span 5; }
.col-6{ grid-column: span 6; }
.col-7{ grid-column: span 7; }
.col-8{ grid-column: span 8; }
.col-9{ grid-column: span 9; }
.col-10{ grid-column: span 10; }
.col-11{ grid-column: span 11; }
.col-12{ grid-column: span 12; }

/* SM ≥576px */
@media (min-width:576px){
  .col-sm-1{ grid-column: span 1; }
  .col-sm-2{ grid-column: span 2; }
  .col-sm-3{ grid-column: span 3; }
  .col-sm-4{ grid-column: span 4; }
  .col-sm-5{ grid-column: span 5; }
  .col-sm-6{ grid-column: span 6; }
  .col-sm-7{ grid-column: span 7; }
  .col-sm-8{ grid-column: span 8; }
  .col-sm-9{ grid-column: span 9; }
  .col-sm-10{ grid-column: span 10; }
  .col-sm-11{ grid-column: span 11; }
  .col-sm-12{ grid-column: span 12; }
}

/* MD ≥768px */
@media (min-width:768px){
  .col-md-1{ grid-column: span 1; }
  .col-md-2{ grid-column: span 2; }
  .col-md-3{ grid-column: span 3; }
  .col-md-4{ grid-column: span 4; }
  .col-md-5{ grid-column: span 5; }
  .col-md-6{ grid-column: span 6; }
  .col-md-7{ grid-column: span 7; }
  .col-md-8{ grid-column: span 8; }
  .col-md-9{ grid-column: span 9; }
  .col-md-10{ grid-column: span 10; }
  .col-md-11{ grid-column: span 11; }
  .col-md-12{ grid-column: span 12; }
}

/* LG ≥992px */
@media (min-width:992px){
  .col-lg-1{ grid-column: span 1; }
  .col-lg-2{ grid-column: span 2; }
  .col-lg-3{ grid-column: span 3; }
  .col-lg-4{ grid-column: span 4; }
  .col-lg-5{ grid-column: span 5; }
  .col-lg-6{ grid-column: span 6; }
  .col-lg-7{ grid-column: span 7; }
  .col-lg-8{ grid-column: span 8; }
  .col-lg-9{ grid-column: span 9; }
  .col-lg-10{ grid-column: span 10; }
  .col-lg-11{ grid-column: span 11; }
  .col-lg-12{ grid-column: span 12; }
}

/* XL ≥1200px */
@media (min-width:1200px){
  .col-xl-1{ grid-column: span 1; }
  .col-xl-2{ grid-column: span 2; }
  .col-xl-3{ grid-column: span 3; }
  .col-xl-4{ grid-column: span 4; }
  .col-xl-5{ grid-column: span 5; }
  .col-xl-6{ grid-column: span 6; }
  .col-xl-7{ grid-column: span 7; }
  .col-xl-8{ grid-column: span 8; }
  .col-xl-9{ grid-column: span 9; }
  .col-xl-10{ grid-column: span 10; }
  .col-xl-11{ grid-column: span 11; }
  .col-xl-12{ grid-column: span 12; }
}

/* Utilities */
.no-gutters{
  --gutter-x: 0px;
  --gutter-y: 0px;
}