islandlives/css/layout/grid.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Grid system.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

.grid-full {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  -ms-grid-columns: (minmax(0, 1fr))[var(--grid-col-count)];
  grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
  grid-column-gap: var(--grid-gap)

  /* .grid-full classes nested 3 or more deep go full width. */
}

.grid-full .grid-full .grid-full {
    display: block;
  }

/*
  If the .grid-full is nested within the following, apply the appropriate number of columns.
    - .layout--content-narrow class.
    - Element that's inheriting the layout--content-narrow styles from its parent region.
*/

@media (min-width: 43.75rem) {

.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
    -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 2)];
    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
}
  }

@media (min-width: 62.5rem) {

.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
    -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 6)];
    grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr))
}
  }

/*
  If the .grid-full is nested within the following, apply the appropriate number of columns.
    - .layout--content-medium class.
    - Element that's inheriting the layout--content-medium styles from its parent region.
*/

@media (min-width: 43.75rem) {

.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
    -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 2)];
    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
}
  }

@media (min-width: 62.5rem) {

.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
    -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 4)];
    grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr))
}
  }