#grid-blurb {
  font: var(--cs-big);
  padding: var(--pd-hge) calc(1rem * var(--lh-reg)) var(--pd-lrg);
  color: var(--co-text);
  border-bottom: 1px solid var(--co-text);
}

#grid-blurb p {
  max-width: 72ch;
}

.ndc-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3), auto));
  grid-auto-rows: minmax(35vh, 1fr);
  grid-auto-flow: dense;
}

.ndc-grid .ndc-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ma-lrg) var(--ma-reg) var(--ma-reg);
  position: relative;
  grid-row-end: auto;
  grid-column-end: auto;
  grid-row: auto;
  grid-column: auto;
}

.ndc-grid .ndc-tile:not(.featured) .metadata .excerpt {
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ndc-grid a.ndc-tile {
  cursor: pointer;
}

.ndc-grid .ndc-tile div {
  z-index: 2;
  mix-blend-mode: luminosity;
}

.ndc-grid .ndc-tile .tile-background {
  object-fit: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ndc-grid .grid-priority-1 {
  order: -2;
}

.ndc-grid .grid-priority-2 {
  order: -1;
}
.ndc-grid .grid-priority-3 {
  order: 0;
}
.ndc-grid .grid-priority-4 {
  order: 1;
}
.ndc-grid .grid-priority-last {
  order: 12;
}

.ndc-grid #members-tile {
  grid-row-start: 1;
  grid-column-start: 4;
}

.ndc-grid .ndc-tile h3 {
  font: var(--cs-hg2);
  text-transform: uppercase;
  max-width: 18ch;
  margin-bottom: var(--ma-sml);
  line-height: 1;
}

.ndc-grid .ndc-tile p {
  font: var(--cs-reg);
  max-width: 48ch;
}

.ndc-grid .grid-1x1 {
  grid-row: span 1;
  grid-column: span 1;
}

.ndc-grid .grid-1x2 {
  grid-row: span 2;
}

.ndc-grid .grid-1x3 {
  grid-row: span 3;
}

.ndc-grid .grid-1x4 {
  grid-row: span 4;
}

.ndc-grid .grid-2x1 {
  grid-column: span 2;
}

.ndc-grid .grid-2x2 {
  grid-row: span 2;
  grid-column: span 2;
}

.ndc-grid .grid-2x3 {
  grid-row: span 3;
  grid-column: span 2;
}

.ndc-grid .grid-2x4 {
  grid-row: span 4;
  grid-column: span 2;
}

.ndc-grid .grid-3x1 {
  grid-column: span 3;
}

.ndc-grid .grid-3x2 {
  grid-row: span 2;
  grid-column: span 3;
}

.ndc-grid .grid-3x3 {
  grid-row: span 3;
  grid-column: span 3;
}

.ndc-grid .grid-3x4 {
  grid-row: span 4;
  grid-column: span 3;
}

.ndc-grid .grid-4x1 {
  grid-column: span 3;
}

.ndc-grid .grid-4x2 {
  grid-row: span 2;
  grid-column: span 3;
}

.ndc-grid .grid-4x3 {
  grid-row: span 3;
  grid-column: span 3;
}

.ndc-grid .grid-4x4 {
  grid-row: span 4;
  grid-column: span 3;
}

/* Themes */
.ndc-tile-theme {
  background-color: rgb(47, 47, 48);
  color: var(--co-high);
}

.ndc-tile-theme .tile-background {
  opacity: 0.7;
}

.ndc-tile-theme.theme-light {
  color: var(--co-text);
}

.ndc-tile-theme.theme-red {
  background-color: hsl(15, 99%, 26%);
}

.ndc-tile-theme.theme-blue {
  background-color: rgb(7, 54, 116);
}

.ndc-tile-theme.theme-green {
  background-color: hsl(98.6, 45.8%, 50%);
}

.ndc-tile-theme.theme-cyan {
  background-color: hsl(158, 29%, 20%);
}

.ndc-tile-theme.theme-yellow {
  background-color: rgb(91, 97, 40);
}

.ndc-tile-theme.theme-pink {
  background-color: rgba(254, 212, 208, 1);
}

.ndc-tile-theme.theme-grey {
  background-color: rgba(29, 24, 34, 1);
}
.ndc-tile-theme.theme-navy {
  background-color: rgba(17, 21, 36, 0.8);
}
.ndc-tile-theme.theme-white {
  background-color: #818191;
  
}
.ndc-tile-theme .tile-background {
  mix-blend-mode: overlay;
}

.ndc-tile-theme.theme-multiply .tile-background {
  mix-blend-mode: multiply;
}

.ndc-tile-theme.theme-luminosity .tile-background {
  mix-blend-mode: luminosity;
}

.ndc-tile-theme.theme-screen .tile-background {
  mix-blend-mode: screen;
}

.ndc-tile-theme.theme-negative .tile-background {
  mix-blend-mode: difference;
}

.ndc-tile-theme.theme-hard-light .tile-background {
  mix-blend-mode: hard-light;
}

.ndc-tile-theme.theme-greyscale .tile-background {
  filter: grayscale(0.9) contrast(0.5);
}

.ndc-tile-theme.theme-contrast-half .tile-background {
  filter: contrast(0.45);
}

.tile-flip {
  justify-content: flex-start !important;
}

.tile-light .metadata {
  color: var(--co-text);
}

.ndc-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-top: 1px solid var(--co-text);
  border-bottom: 1px solid var(--co-text);
  padding: var(--pd-hge) var(--pd-reg) var(--pd-reg) var(--pd-reg);
  min-height: 55vh;
}

.ndc-intro .intro-text, .ndc-intro h2 {
  font: var(--cs-hg1);
  color: var(--co-text);

}

.ndc-intro .intro-text {
  max-width: 32ch;
}

.ndc-intro .intro-text .emphasis a {
  font-variation-settings: 'wght' 500;
  text-decoration: underline;
  color: var(--co-pri);
}
.ndc-intro .intro-text a {
  text-decoration: underline;
  text-decoration-style: dotted;
  color: var(--co-text);
  text-decoration-color: rgba(0,0,0,0.05);
}
.ndc-intro .intro-text {
  margin-bottom: var(--ma-lrg);
}



@media screen and (max-width: 960px) {
  .ndc-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 2), auto));
  }
  .ndc-grid #members-tile {
    grid-row-start: auto !important;
    grid-column-start: auto !important;
  }
  .ndc-grid .grid-1x1 {
    grid-row: span 1;
    grid-column: span 1;
  }

  .ndc-grid .grid-1x2 {
    grid-row: span 2;
  }

  .ndc-grid .grid-1x3 {
    grid-row: span 3;
  }

  .ndc-grid .grid-1x4 {
    grid-row: span 3;
  }

  .ndc-grid .grid-2x1 {
    grid-column: span 1;
  }

  .ndc-grid .grid-2x2 {
    grid-row: span 2;
    grid-column: span 1;
  }

  .ndc-grid .grid-2x3 {
    grid-row: span 3;
    grid-column: span 1;
  }

  .ndc-grid .grid-2x4 {
    grid-row: span 3;
    grid-column: span 1;
  }

  .ndc-grid .grid-3x1 {
    grid-column: span 2;
  }

  .ndc-grid .grid-3x2 {
    grid-row: span 2;
    grid-column: span 2;
  }

  .ndc-grid .grid-3x3 {
    grid-row: span 3;
    grid-column: span 2;
  }

  .ndc-grid .grid-3x4 {
    grid-row: span 3;
    grid-column: span 2;
  }

  .ndc-grid .grid-4x1 {
    grid-column: span 2;
  }

  .ndc-grid .grid-4x2 {
    grid-row: span 2;
    grid-column: span 2;
  }

  .ndc-grid .grid-4x3 {
    grid-row: span 3;
    grid-column: span 2;
  }

  .ndc-grid .grid-4x4 {
    grid-row: span 3;
    grid-column: span 2;
  }
}

@media screen and (max-width: 640px) {
  .ndc-grid {
    display: flex;
    flex-direction: column;
  }

  .ndc-grid .ndc-tile {
    height: 45vh;
    padding: var(--ma-reg) var(--ma-reg);
    min-height: 30rem;
  }
  .ndc-grid .ndc-tile .metadata {
    max-height: 100%;
    overflow: hidden;
  }
  .ndc-grid .ndc-tile:first-child {
    height: 75vh;
  }
}