/* --- Grid Configuration Variables --- */
:root {
    --grid-columns: 12;
    --grid-gap: 1.5rem; /* Equivalent to Bootstrap's standard gutter */
}

/* --- Core Base Container --- */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--grid-gap);
    padding-left: var(--grid-gap);
}

/* Container Breakpoint Widths */
@media (min-width: 768px) {
    .container { max-width: 720px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

@media (max-width: 800px) {
  .grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- The Grid Parent Layout --- */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
}

/* --- 1. Extra Small Screens (xs - default mobile first) --- */
.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; }

/* --- 2. Medium Screens (md - Tablets, >= 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; }
}

/* --- 3. Large Screens (lg - Desktops, >= 1200px) --- */
@media (min-width: 1200px) {
    .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; }
}