/* LAYOUT */
.cb-infogrid h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 3rem;
}

.cb-infogrid h2:after {
  content: "";
  width: 136px;
  height: 3px;
  background-color: var(--black);
  position: absolute;
  bottom: -0.5rem;
  left: 0;
}

.cb-infogrid__wrapper {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(3, auto);
  grid-gap: 2rem;
}

.cb-infogrid__wrapper .cb_infogrid__single {
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: 8px solid var(--yellow);
  padding: 2rem;
}

.cb-infogrid__wrapper .cb_infogrid__single:nth-of-type(1) {
  grid-row: 1 / span 2;
  border-color: var(--dark-grey);
}

.cb-infogrid__wrapper .cb_infogrid__single:nth-of-type(4) {
  grid-row: 1 / span 2;
  grid-column: 3;
  border-color: var(--light-yellow);
}

.cb-infogrid__wrapper .cb_infogrid__single:nth-of-type(5) {
  grid-row: 3 / span 2;
  border-color: var(--light-yellow);
}

.cb-infogrid__wrapper .cb_infogrid__single:nth-of-type(8) {
  grid-row: 3 / span 2;
  grid-column: 3;
  border-color: var(--dark-grey);
}

.cb-infogrid__wrapper .cb_infogrid__single:nth-of-type(3),
.cb-infogrid__wrapper .cb_infogrid__single:nth-of-type(7) {
  border-color: var(--light-grey);
}

.cb-infogrid__wrapper .cb_infogrid__single h3 {
  font-size: 1.125rem;
}

@media only screen and (max-width: 1024px) {
  .cb-infogrid__wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .cb-infogrid__wrapper .cb_infogrid__single {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}

@media only screen and (max-width: 768px) {
  .cb-infogrid__wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .cb-infogrid__wrapper .cb_infogrid__single {
    min-height: 300px;
    margin: 0 0 1rem 0;
    padding: 1rem;
  }
}