/* 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) {
  .mp-col-span-sm-1 {
    grid-column: span 1;
  }
  .mp-col-span-sm-2 {
    grid-column: span 2;
  }
  .mp-col-span-sm-3 {
    grid-column: span 3;
  }
  .mp-col-span-sm-4 {
    grid-column: span 4;
  }
  .mp-col-span-sm-5 {
    grid-column: span 5;
  }
  .mp-col-span-sm-6 {
    grid-column: span 6;
  }
  .mp-col-span-sm-7 {
    grid-column: span 7;
  }
  .mp-col-span-sm-8 {
    grid-column: span 8;
  }
  .mp-col-span-sm-9 {
    grid-column: span 9;
  }
  .mp-col-span-sm-10 {
    grid-column: span 10;
  }
  .mp-col-span-sm-11 {
    grid-column: span 11;
  }
  .mp-col-span-sm-12 {
    grid-column: span 12;
  }
}

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