/* Stoon Grid Column System */

/* Desktop viewports (≥ 1024px) */
@media (min-width: 1024px) {
  .col-d-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-d-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-d-3 { flex: 0 0 auto; width: 25%; }
  .col-d-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-d-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-d-6 { flex: 0 0 auto; width: 50%; }
  .col-d-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-d-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-d-9 { flex: 0 0 auto; width: 75%; }
  .col-d-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-d-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-d-12 { flex: 0 0 auto; width: 100%; }
}

/* Tablet viewports (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .col-t-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-t-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-t-3 { flex: 0 0 auto; width: 25%; }
  .col-t-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-t-6 { flex: 0 0 auto; width: 50%; }
  .col-t-12 { flex: 0 0 auto; width: 100%; }
}

/* Mobile viewports (< 768px) */
@media (max-width: 767.98px) {
  .col-m-6 { flex: 0 0 auto; width: 50%; }
  .col-m-12 { flex: 0 0 auto; width: 100%; }
}