/* Multicolumn list grid variants (tablet-down and desktop)
   Uses native CSS nesting with & to scope modifier classes.
   The element has classes like:
   "multicolumn-list contains-content-container grid grid--1-col-tablet-down grid--2-col-desktop"
*/
.multicolumn {
  padding: var(--multicolumn-grid-padding, 2rem);
} 
.multicolumn-list.contains-content-container.grid {
  display: grid;
  gap: var(--multicolumn-grid-gap, 2rem);
  grid-template-columns: 1fr; /* sensible default */

  /* Tablet-down (mobile-first) column counts */
  &.grid--1-col-tablet-down { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  &.grid--2-col-tablet-down { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  &.grid--3-col-tablet-down { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  &.grid--4-col-tablet-down { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  &.grid--5-col-tablet-down { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  &.grid--6-col-tablet-down { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* Desktop overrides */
  @media screen and (min-width: 990px) {
    &.grid--1-col-desktop { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    &.grid--2-col-desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    &.grid--3-col-desktop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    &.grid--4-col-desktop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    &.grid--5-col-desktop { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    &.grid--6-col-desktop { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }
}