/* 
 * File: grid.css
 * Author: SEHS4517 - Group 102 - Group No.1 Team
 * Description: CSS for the grid system
 */

/* --- GRID ROW --- */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.row.no-gap {
  gap: 0px;
}

/* --- GRID COLUMNS (Desktop) --- */
.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;
}

/* --- GRID COLUMNS (Mobile) --- */
@media (max-width: 768px) {
  .col-xs-1 {
    grid-column: span 1;
  }
  .col-xs-2 {
    grid-column: span 2;
  }
  .col-xs-3 {
    grid-column: span 3;
  }
  .col-xs-4 {
    grid-column: span 4;
  }
  .col-xs-5 {
    grid-column: span 5;
  }
  .col-xs-6 {
    grid-column: span 6;
  }
  .col-xs-7 {
    grid-column: span 7;
  }
  .col-xs-8 {
    grid-column: span 8;
  }
  .col-xs-9 {
    grid-column: span 9;
  }
  .col-xs-10 {
    grid-column: span 10;
  }
  .col-xs-11 {
    grid-column: span 11;
  }
  .col-xs-12 {
    grid-column: span 12;
  }
}