@media (max-width: 47.9375rem) {
  .hero {
    padding-block-end: clamp(3.25rem, 14vw, 4.25rem);
  }

  #problem {
    padding-block-start: clamp(2.75rem, 12vw, 3.5rem);
  }
}

@media (min-width: 48rem) {
  .container {
    width: min(100% - 5rem, var(--container-width));
  }

  .section {
    padding-block: var(--space-3xl);
  }

  .editorial-section {
    padding-block: var(--space-3xl);
  }

  .hero {
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .hero__content {
    gap: var(--space-md);
    max-width: min(100%, 42.5rem);
  }

  .hero h1 {
    font-size: clamp(3.48rem, 6.72vw, 4.32rem);
    line-height: 0.96;
  }

  .hero__media {
    max-height: 17.5rem;
  }

  .hero__media img {
    object-position: 54% 44%;
  }

  .site-logo img {
    width: 23rem;
  }
}

@media (min-width: 56.25rem) {
  .site-header > .container {
    width: min(100% - 5rem, 76rem);
  }

  .hero > .container {
    width: min(100% - 5rem, 76rem);
  }

  .hero__inner {
    max-width: none;
    width: 100%;
  }

  .hero__content {
    align-items: center;
    column-gap: clamp(2.25rem, 4vw, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 35rem) minmax(0, 1fr);
    max-width: none;
    row-gap: var(--space-lg);
    width: 100%;
  }

  .hero__content > .eyebrow,
  .hero__content > h1,
  .hero__content > .hero-quote,
  .hero__content > .lead,
  .hero__content > .hero__actions {
    grid-column: 1;
  }

  .hero h1 {
    font-size: clamp(4.08rem, 4.32vw, 4.56rem);
    line-height: 0.94;
    max-width: 35rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero__media {
    align-self: start;
    grid-column: 2;
    grid-row: 2 / span 4;
    height: clamp(26.25rem, 38vw, 32.75rem);
    justify-self: end;
    max-height: none;
    max-width: 43rem;
    width: 100%;
  }

  .hero__media img {
    object-position: center center;
  }

  .lead,
  .hero-quote,
  .hero__actions {
    max-width: 26.25rem;
  }
}

@media (min-width: 72rem) {
  .section {
    padding-block: var(--space-4xl);
  }

  .editorial-section {
    padding-block: 8rem;
  }

  .hero {
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .hero__content {
    max-width: none;
  }

  .hero__media {
    max-width: 43rem;
  }

  #vertrauen-2 > .profile-layout {
    column-gap: clamp(3rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 35rem) minmax(0, 1fr);
    width: min(100% - 5rem, 76rem);
  }

  #vertrauen-2 .profile-copy {
    max-width: none;
    width: 100%;
  }

  #vertrauen-2 .profile-image {
    justify-self: end;
    margin-top: clamp(2.75rem, 4vw, 3.5rem);
    max-width: 43rem;
  }
}

@media (min-width: 80rem) {
  .hero__content {
    column-gap: clamp(3rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 35rem) minmax(0, 1fr);
    max-width: none;
  }

  .hero__media {
    max-width: 43rem;
  }
}