/* Simplified Bootstrap Grid System */

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

/* Columns */
.col {
  flex: 1 0 0%;
  padding-right: 12px;
  padding-left: 12px;
}

.col-1 { flex: 0 0 calc(8.333333% - 24px); width: calc(8.333333% - 24px); }
.col-2 { flex: 0 0 calc(16.666667% - 24px); width: calc(16.666667% - 24px); }
.col-3 { flex: 0 0 calc(25% - 24px); width: calc(25% - 24px); }
.col-4 { flex: 0 0 calc(33.333333% - 24px); width: calc(33.333333% - 24px); }
.col-5 { flex: 0 0 calc(41.666667% - 24px); width: calc(41.666667% - 24px); }
.col-6 { flex: 0 0 calc(50% - 24px); width: calc(50% - 24px); }
.col-7 { flex: 0 0 calc(58.333333% - 24px); width: calc(58.333333% - 24px); }
.col-8 { flex: 0 0 calc(66.666667% - 24px); width: calc(66.666667% - 24px); }
.col-9 { flex: 0 0 calc(75% - 24px); width: calc(75% - 24px); }
.col-10 { flex: 0 0 calc(83.333333% - 24px); width: calc(83.333333% - 24px); }
.col-11 { flex: 0 0 calc(91.666667% - 24px); width: calc(91.666667% - 24px); }
.col-12 { flex: 0 0 calc(100% - 24px); width: calc(100% - 24px); }

/* Offset Classes */
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

/* Tablet - Medium screens (768px) */
@media (max-width: 991px) {
  .col-md-1 { flex: 0 0 calc(8.333333% - 24px); width: calc(8.333333% - 24px); }
  .col-md-2 { flex: 0 0 calc(16.666667% - 24px); width: calc(16.666667% - 24px); }
  .col-md-3 { flex: 0 0 calc(25% - 24px); width: calc(25% - 24px); }
  .col-md-4 { flex: 0 0 calc(33.333333% - 24px); width: calc(33.333333% - 24px); }
  .col-md-5 { flex: 0 0 calc(41.666667% - 24px); width: calc(41.666667% - 24px); }
  .col-md-6 { flex: 0 0 calc(50% - 24px); width: calc(50% - 24px); }
  .col-md-7 { flex: 0 0 calc(58.333333% - 24px); width: calc(58.333333% - 24px); }
  .col-md-8 { flex: 0 0 calc(66.666667% - 24px); width: calc(66.666667% - 24px); }
  .col-md-9 { flex: 0 0 calc(75% - 24px); width: calc(75% - 24px); }
  .col-md-10 { flex: 0 0 calc(83.333333% - 24px); width: calc(83.333333% - 24px); }
  .col-md-11 { flex: 0 0 calc(91.666667% - 24px); width: calc(91.666667% - 24px); }
  .col-md-12 { flex: 0 0 calc(100% - 24px); width: calc(100% - 24px); }

  .offset-md-1 { margin-left: 8.333333%; }
  .offset-md-2 { margin-left: 16.666667%; }
  .offset-md-3 { margin-left: 25%; }
  .offset-md-4 { margin-left: 33.333333%; }
  .offset-md-5 { margin-left: 41.666667%; }
  .offset-md-6 { margin-left: 50%; }
  .offset-md-7 { margin-left: 58.333333%; }
  .offset-md-8 { margin-left: 66.666667%; }
  .offset-md-9 { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.333333%; }
  .offset-md-11 { margin-left: 91.666667%; }
}

/* Mobile - Small screens (576px) */
@media (max-width: 575px) {
  .col-sm-1 { flex: 0 0 calc(8.333333% - 24px); width: calc(8.333333% - 24px); }
  .col-sm-2 { flex: 0 0 calc(16.666667% - 24px); width: calc(16.666667% - 24px); }
  .col-sm-3 { flex: 0 0 calc(25% - 24px); width: calc(25% - 24px); }
  .col-sm-4 { flex: 0 0 calc(33.333333% - 24px); width: calc(33.333333% - 24px); }
  .col-sm-5 { flex: 0 0 calc(41.666667% - 24px); width: calc(41.666667% - 24px); }
  .col-sm-6 { flex: 0 0 calc(50% - 24px); width: calc(50% - 24px); }
  .col-sm-7 { flex: 0 0 calc(58.333333% - 24px); width: calc(58.333333% - 24px); }
  .col-sm-8 { flex: 0 0 calc(66.666667% - 24px); width: calc(66.666667% - 24px); }
  .col-sm-9 { flex: 0 0 calc(75% - 24px); width: calc(75% - 24px); }
  .col-sm-10 { flex: 0 0 calc(83.333333% - 24px); width: calc(83.333333% - 24px); }
  .col-sm-11 { flex: 0 0 calc(91.666667% - 24px); width: calc(91.666667% - 24px); }
  .col-sm-12 { flex: 0 0 calc(100% - 24px); width: calc(100% - 24px); }

  .offset-sm-1 { margin-left: 8.333333%; }
  .offset-sm-2 { margin-left: 16.666667%; }
  .offset-sm-3 { margin-left: 25%; }
  .offset-sm-4 { margin-left: 33.333333%; }
  .offset-sm-5 { margin-left: 41.666667%; }
  .offset-sm-6 { margin-left: 50%; }
  .offset-sm-7 { margin-left: 58.333333%; }
  .offset-sm-8 { margin-left: 66.666667%; }
  .offset-sm-9 { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.333333%; }
  .offset-sm-11 { margin-left: 91.666667%; }
}