@use '../abstract' as *;

.grid-dashboard-1s-2m-6l {
  /* all screens */
  display:  grid;
  gap:      pxToRem(24);

  /* medium screen */
  @media #{$break2} {
    grid-template-columns: repeat(2, 1fr);
    .is-2-columns-medium-screen { grid-column:span 2; }
  }

  /* large screen */
  @media #{$break3open} {
    grid-template-columns: repeat(6, 1fr);
    .is-2-columns-large-screen { grid-column:span 2; }
    .is-3-columns-large-screen { grid-column:span 3; }
    .is-location-row-2-end-large-screen { grid-row-start:2; grid-column-end:-1; }
    .is-2-rows-large-screen { grid-row-end:span 2; }
  }
}