.cb-subpage-header.cb-yellow {
  background-color: var(--yellow);
}
.cb-subpage-header {
  background-color: var(--yellow);
  margin-top: 0 !important;
  margin-bottom: 150px !important;
  display: grid;
  grid-template-columns: 1fr var(--width-content) 0.75fr 0.25fr;
}
.cb-subpage-header__inner {
  grid-column: 2/4;
  display: flex;
  grid-column-gap: 5rem;
  justify-content: space-between;
  position: relative;
}

.cb-subpage-header.cb-grey {
  background-color: var(--light-light-grey);
}

.cb-subpage-header.cb-green {
  background-color: #aec526;
}

.cb-subpage-header.cb-blue {
  background-color: #99b6db;
}

.cb-subpage-header__text {
  padding-bottom: 3rem;
  padding-top: 2.35rem;
  flex-basis: calc(50% - 5rem);
  flex-shrink: 0;
  min-height: 420px;
}

.cb-subpage-header__text p {
  margin-bottom: 1rem;
}

.cb-subpage-header__img {
  text-align: right;
}

.cb-subpage-header__img img {
  width: 100%;
  max-width: 560px;
  max-height: 420px;
  height: 440px;
  object-fit: cover;
  position: absolute;
  bottom: -4.875rem;
  right: 0;
}

.cb-subpage-header .cb-link--primary {
  border: 3px solid var(--black);
  margin-right: 0;
}

.cb-subpage-header .cb-link--primary:hover {
  background-color: var(--black);
  color: var(--white);
}

.cb-subpage-header .cb-link--primary:hover:after {
  background-image: url(/wp-content/themes/cbra-child/assets/icons/link-arrow-white.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  right: 1rem;
  width: 24px;
  height: 24px;
}

.cb-subpage-header__inner h1 {
  line-height: 1;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

/* .cb-subpage-header #breadcrumbs {
  background-color: white;
  padding-bottom: 1rem;
} */

.cb-subpage-header #breadcrumbs a {
  color: var(--black);
  text-decoration: none;
  transition: all ease 0.3s;
  margin-right: 1rem;
}

.cb-subpage-header #breadcrumbs a:hover {
  color: var(--grey);
}

.cb-subpage-header .breadcrumb_last {
  font-weight: bold;
  margin-left: 1rem;
}

.cb-subpage-header #breadcrumbs > span {
  display: flex;
  /* margin-left: calc((100% - 82%) / 2); */
}

.cb-subpage-header__buttons {
  display: flex;
  grid-row-gap: 1rem;
  grid-column-gap: 2rem;
  flex-wrap: wrap;
}

@media only screen and (min-width: 1441px) {
  .cb-subpage-header__text {
    /* flex-basis: 40%; removed to make the breadcrumbs area wide enough ~MP, 06.06. */
  }
  .cb-subpage-header__img {
    flex-basis: calc(55% - 5rem);
  }
  .cb-subpage-header__img img {
    /* max-width: 100%; */
  }
}

/* WEIRD BREAKPOINT BETWEEN TABLET & DESKTOP */
@media only screen and (max-width: 1170px) {
  .cb-subpage-header__img img {
    max-height: 420px;
    max-width: 315px;
  }
}

/* TABLET */
@media only screen and (max-width: 1024px) {
  .cb-subpage-header {
    padding-top: 1rem;
    display: block;
  }
  .cb-subpage-header__inner {
    flex-direction: column;
    max-height: unset;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--width-content);
  }
  .cb-subpage-header__text {
    min-height: unset;
  }
  .cb-subpage-header__img {
    text-align: center;
  }
  .cb-subpage-header__img img {
    /* max-width: 100%; */
    margin-bottom: -4.875rem;
    height: unset;
    position: static;
    aspect-ratio: 4 / 3;
  }
}

/* MOBILE */
@media only screen and (max-width: 768px) {
  .cb-subpage-header {
    margin-bottom: 200px !important;
  }
  .cb-subpage-header__inner h1 {
    font-size: 2rem;
  }
  .cb-subpage-header #breadcrumbs {
    display: none;
  }
  .cb-subpage-header__img img {
    /* height: 100%; */
    max-height: 100%;
    margin-top: 0;
    aspect-ratio: 4 / 3;
  }
}