/* https://github.com/UN-OCHA/common_design/blob/main/components/cd-grid/cd-grid.css */

.cd-grid > * {
  margin-bottom: 1rem;
}

.cd-grid--background > * {
  background: var(--cd-grey--light);
}

/* Testing Aid */
.cd-grid--2-col > * {
  /* background: lightpink; */
}

.cd-grid--3-col > * {
  /* background: lightgreen; */
}

.cd-grid--4-col > * {
  /* background: lightblue; */
}

@media (min-width: 576px) {
  .cd-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .cd-grid > * {
    flex: 0 0 48%;
  }

  .cd-grid--2-col.cd-grid--grow > *:last-child {
    flex: 1 0 100%;
    max-width: 100%;
    max-width: unset;
  }

  .cd-grid--3-col > * {
    flex: 0 0 48%;
  }
}

@media (min-width: 768px) {
  .cd-grid > * {
    flex: 0 0 32%;
  }

  .cd-grid--2-col > * {
    flex: 0 0 48%;
  }

  .cd-grid--3-col.cd-grid--grow > *:last-child,
  .cd-grid--4-col.cd-grid--grow > *:last-child {
    flex: 1 0 100%;
    max-width: 100%;
    max-width: unset;
  }
}

@media (min-width: 1024px) {
  .cd-grid > * {
    flex: 0 0 24%;
  }

  .cd-grid > *:nth-child(odd) {
    clear: initial;
    margin-right: unset;
  }

  .cd-grid--2-col > * {
    flex: 0 0 48%;
  }

  .cd-grid--3-col > * {
    flex: 0 0 32%;
  }

  .cd-grid--4-col > * {
    flex: 0 0 24%;
  }
}

@supports (display: grid) {
  .cd-grid--2-col > *,
  .cd-grid--3-col > *,
  .cd-grid--4-col > * {
    max-width: unset;
  }

  @media (min-width: 576px) {
    .cd-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(200px, 1fr));
      grid-gap: 1rem;
    }

    .cd-grid > * {
      margin-bottom: 0;
    }

    .cd-grid--2-col.cd-grid--grow > *:last-child {
      grid-column: -1/1;
    }

    .cd-grid--3-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(100px, 1fr));
      grid-gap: 1rem;
    }

    .cd-grid--4-col.cd-grid--grow > *:last-child,
    .cd-grid--3-col.cd-grid--grow > *:last-child {
      grid-column: -1/1;
    }
  }

  @media (min-width: 768px) {
    .cd-grid {
      grid-template-columns: repeat(3, minmax(200px, 1fr));
      max-width: 100%;
      max-width: unset;
    }

    .cd-grid--2-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(200px, 1fr));
      grid-gap: 1rem;
    }
  }

  @media (min-width: 1024px) {
    .cd-grid {
      grid-template-columns: repeat(4, minmax(200px, 1fr));
      max-width: 100%;
      max-width: unset;
    }

    .cd-grid--2-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(200px, 1fr));
      grid-gap: 1rem;
    }

    .cd-grid--3-col {
      grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
  }
}

/* IE 11 fix for clearing floated items */
@media screen and (-ms-high-contrast: none) {
  @media (min-width: 1024px) {
    .grid-item {
      min-height: 24rem;
    }
  }
}