/* Define utility classes for a 12-column grid system */
:root {
  --grid-cols: 12;
}

/* General grid container */
.mp-grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

/* Mobile-first (default) */
@media screen and (max-width: 600px) {
  .accessi-col-sm-1 {
    grid-column: span 1;
  }
  .accessi-col-sm-2 {
    grid-column: span 2;
  }
  .accessi-col-sm-3 {
    grid-column: span 3;
  }
  .accessi-col-sm-4 {
    grid-column: span 4;
  }
  .accessi-col-sm-5 {
    grid-column: span 5;
  }
  .accessi-col-sm-6 {
    grid-column: span 6;
  }
  .accessi-col-sm-7 {
    grid-column: span 7;
  }
  .accessi-col-sm-8 {
    grid-column: span 8;
  }
  .accessi-col-sm-9 {
    grid-column: span 9;
  }
  .accessi-col-sm-10 {
    grid-column: span 10;
  }
  .accessi-col-sm-11 {
    grid-column: span 11;
  }
  .accessi-col-sm-12 {
    grid-column: span 12;
  }
}

/* Large screens */
@media screen and (min-width: 601px) {
  .accessi-col-1 {
    grid-column: span 1;
  }
  .accessi-col-2 {
    grid-column: span 2;
  }
  .accessi-col-3 {
    grid-column: span 3;
  }
  .accessi-col-4 {
    grid-column: span 4;
  }
  .accessi-col-5 {
    grid-column: span 5;
  }
  .accessi-col-6 {
    grid-column: span 6;
  }
  .accessi-col-7 {
    grid-column: span 7;
  }
  .accessi-col-8 {
    grid-column: span 8;
  }
  .accessi-col-9 {
    grid-column: span 9;
  }
  .accessi-col-10 {
    grid-column: span 10;
  }
  .accessi-col-11 {
    grid-column: span 11;
  }
  .accessi-col-12 {
    grid-column: span 12;
  }
}