.SubpageHeader {
  padding-top: var(--spaceXs);
  margin-top: calc(var(--spaceLg) * -1);
  margin-bottom: var(--spaceLg);
  background: var(--colorSecondaryBg);
  min-height: clamp(10rem, 20vw, 20rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.SubpageHeader-title {
  margin: 0;
  padding-left: var(--leftOffset);
  display: block;
  position: relative;
}

.SubpageHeader-title::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 6px;
  background: var(--colorBrand);
  inset: 0 auto 0 0;
}

.SubpageHeader .Breadcrumbs {
  padding-left: calc(var(--leftOffset) - var(--sizeContentOffset));
}

.SubpageHeader--hasImage {
  position: relative;
}

.SubpageHeader--hasImage .SubpageHeader-frame {
  min-height: clamp(20rem, 45vw, 50rem);
  display: grid;
  grid-template: 'bread img' 1fr
 'title img' 1fr / 2fr 3fr;
  gap: 0 2rem;
  padding-bottom: var(--spaceMd);
}

.SubpageHeader--hasImage .SubpageHeader-image {
  grid-area: img;
  position: static;
  inset: 0;
  overflow: hidden;
  max-width: calc(var(--sizeContentWidthHd) + var(--sizeContentOffset) * 2);
  margin: calc(-1 * (var(--spaceSm) + var(--spaceXs))) calc(-1 * var(--sizeContentOffset)) calc(-1 * var(--spaceMd));
}

.SubpageHeader--hasImage .SubpageHeader-image img, .SubpageHeader--hasImage .SubpageHeader-image svg, .SubpageHeader--hasImage .SubpageHeader-image:after {
  position: static;
  display: block;
  inset: 0;
}

.SubpageHeader--hasImage .SubpageHeader-image img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.SubpageHeader--hasImage .SubpageHeader-title {
  grid-area: title;
  font-size: var(--textSize-1);
  color: inherit;
  font-weight: 700;
  position: relative;
  place-self: start;
}

.SubpageHeader--hasImage .Breadcrumbs {
  grid-area: bread;
  position: relative;
  place-self: end start;
}

@media screen and (max-width: 55rem) {
  .SubpageHeader--hasImage .SubpageHeader-frame {
    grid-template: 'img' auto
 'bread' auto
 'title' auto / 1fr;
    gap: 1rem;
  }
  .SubpageHeader--hasImage .SubpageHeader-image {
    margin-bottom: 0;
  }
}

@media (max-width: 32rem) {
  .SubpageHeader--hasImage .SubpageHeader-title {
    text-align: center;
  }
}

/*# sourceMappingURL=subpage-header.min.css.map */