/*********************************
 * GRID - LISTS
 * Unordered Lists: apply "grid-N" and optionally "grid--compact".
 *********************************/

/* add border in CKEditor help with visualizing list boundaries. */
.ck-content ul[class^=grid] li {
  border: 2px #ccc dotted;
}

ul.grid-2,
.ck-content ul.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
@media (min-width: 768px) {
  ul.grid-2,
  .ck-content ul.grid-2 {
    grid-template-columns: minmax(auto, 40%) minmax(auto, 40%);
  }
}
ul.grid-2.grid--compact,
.ck-content ul.grid-2.grid--compact {
  grid-row-gap: 10px;
}

ul.grid-3,
.ck-content ul.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
@media (min-width: 768px) {
  ul.grid-3,
  .ck-content ul.grid-3 {
    grid-template-columns: minmax(auto, 33%) minmax(auto, 33%) minmax(auto, 33%);
  }
}
ul.grid-3.grid--compact
.ck-content ul.grid-3.grid--compact {
  grid-row-gap: 10px;
}

ul.grid-4,
.ck-content ul.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
@media (min-width: 768px) {
  ul.grid-4,
  .ck-content ul.grid-4 {
    grid-template-columns: minmax(auto, 33%) minmax(auto, 33%);
  }
}
@media (min-width: 768px) {
  ul.grid-4,
  .ck-content ul.grid-4 {
    grid-template-columns: minmax(auto, 33%) minmax(auto, 33%) minmax(auto, 33%);
  }
}
ul.grid-4.grid--compact,
.ck-content ul.grid-4.grid--compact {
  grid-row-gap: 10px;
}

/************************************ 
 * GRIDS
 * Views: must apply BOTH "grid" AND "grid-N".
 * Entity Reference field: must apply BOTH "grid" and "grid-N".
 ***********************************/

.grid.grid-content,
.grid > .view-content,
.grid.field--type-entity-reference,
.grid.field--type-entity-reference-revisions {
  display: grid;
  gap: 25px;
}
  .grid.grid-2.grid-content,
  .grid.grid-2 > .view-content,
  .grid.grid-2.field--type-entity-reference,
  .grid.grid-2.field--type-entity-reference-revisions {
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .grid.grid-2.grid-content,
    .grid.grid-2 > .view-content,
    .grid.grid-2.field--type-entity-reference,
    .grid.grid-2.field--type-entity-reference-revisions {
      grid-template-columns: 1fr 1fr;
    }
  }

  .grid.grid-3.grid-content,
  .grid.grid-3 > .view-content,
  .grid.grid-3.field--type-entity-reference,
  .grid.grid-3.field--type-entity-reference-revisions {
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .grid.grid-3.grid-content,
    .grid.grid-3 > .view-content,
    .grid.grid-3.field--type-entity-reference,
    .grid.grid-3.field--type-entity-reference-revisions {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  .grid.grid-4.grid-content,
  .grid.grid-4 > .view-content,
  .grid.grid-4.field--type-entity-reference,
  .grid.grid-4.field--type-entity-reference-revisions {
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .grid.grid-4.grid-content,
    .grid.grid-4 > .view-content,
    .grid.grid-4.field--type-entity-reference,
    .grid.grid-4.field--type-entity-reference-revisions {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 1220px) {
    .grid.grid-4.grid-content,
    .grid.grid-4 > .view-content,
    .grid.grid-4.field--type-entity-reference,
    .grid.grid-4.field--type-entity-reference-revisions {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

  .grid > .view-content > .views-row,
  .grid.field--type-entity-reference > .field__item,
  .grid.field--type-entity-reference-revisions > .field__item {
    /* Use flexbox to force all items to be same height. */
    display: flex;
  }

/************************************
 * CENTERED GRIDS - where columns in last row are centered if needed.
 * Views: must apply BOTH "grid-centered" AND "grid-N".
 * Entity Reference field: must apply BOTH "grid-centered" and "grid-N".
 ***********************************/

.grid-centered.grid-content,
.grid-centered > .view-content,
.grid-centered.field--type-entity-reference,
.grid-centered.field--type-entity-reference-revisions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}
  .grid-centered.grid-2.grid-content > *,
  .grid-centered.grid-2 > .view-content > *,
  .grid-centered.grid-2.field--type-entity-reference > *,
  .grid-centered.grid-2.field--type-entity-reference-revisions > * {
    width: 100%;
  }
  @media (min-width: 768px) {
    .grid-centered.grid-2.grid-content > *,
    .grid-centered.grid-2 > .view-content > *,
    .grid-centered.grid-2.field--type-entity-reference > *,
    .grid-centered.grid-2.field--type-entity-reference-revisions > * {
      /* subtract (1*gap)/2 px */
      width: calc(50% - 12.5px);
    }
  }

  .grid-centered.grid-3.grid-content > *,
  .grid-centered.grid-3 > .view-content > *,
  .grid-centered.grid-3.field--type-entity-reference > *,
  .grid-centered.grid-3.field--type-entity-reference-revisions > * {
    width: 100%;
  }
  @media (min-width: 768px) {
    .grid-centered.grid-3.grid-content > *,
    .grid-centered.grid-3 > .view-content > *,
    .grid-centered.grid-3.field--type-entity-reference > *,
    .grid-centered.grid-3.field--type-entity-reference-revisions > * {
      /* subtract (1*gap)/2 px */
      width: calc(50% - 12.5px);
    }
  }
  @media (min-width: 1220px) {
    .grid-centered.grid-3.grid-content > *,
    .grid-centered.grid-3 > .view-content > *,
    .grid-centered.grid-3.field--type-entity-reference > *,
    .grid-centered.grid-3.field--type-entity-reference-revisions > * {
      /* subtract (2*gap)/3 px */
      width: calc(33.3333% - 16.66667px);
    }
  }

  .grid-centered.grid-4.grid-content > *,
  .grid-centered.grid-4 > .view-content > *,
  .grid-centered.grid-4.field--type-entity-reference > *,
  .grid-centered.grid-4.field--type-entity-reference-revisions > * {
    width: 100%;
  }
  @media (min-width: 768px) {
    .grid-centered.grid-4.grid-content > *,
    .grid-centered.grid-4 > .view-content > *,
    .grid-centered.grid-4.field--type-entity-reference > *,
    .grid-centered.grid-4.field--type-entity-reference-revisions > * {
      /* subtract (1*gap)/2 px */
      width: calc(50% - 12.5px);
    }
  }
  @media (min-width: 1220px) {
    .grid-centered.grid-4.grid-content > *,
    .grid-centered.grid-4 > .view-content > *,
    .grid-centered.grid-4.field--type-entity-reference > *,
    .grid-centered.grid-4.field--type-entity-reference-revisions > * {
      /* subtract (3*gap)/4 px */
      width: calc(25% - 18.75px);
    }
  }

  .grid-centered > .view-content > .views-row,
  .grid-centered.field--type-entity-reference > .field__item,
  .grid-centered.field--type-entity-reference-revisions > .field__item {
    /* Use flexbox to force all items to be same height. */
    display: flex;
  }