/* Customer-selected hero photographs. Keep framing specific to these pages. */
.hero--kundenfoto .frame--kundenfoto img {
  object-position: var(--foto-mobil, 50% 50%);
}

@media (max-width: 61.99rem) {
  .hero--kundenfoto .hero__media {
    display: grid;
  }

  .hero--kundenfoto .frame--kundenfoto {
    aspect-ratio: auto;
    height: 100%;
    min-height: clamp(19rem, 65vw, 30rem);
    --veil: 0.06;
    --veil-dir: linear-gradient(to bottom, rgba(8, 8, 7, 0.12), transparent 30%, rgba(8, 8, 7, 0.15));
    --hero-mask: linear-gradient(to bottom,
      transparent 0, rgba(0, 0, 0, 0.6) 1rem, #000 2.75rem,
      #000 60%, rgba(0, 0, 0, 0.65) 78%, transparent 100%);
  }

  .hero--kundenfoto .frame--kundenfoto-portrait {
    min-height: clamp(23rem, 90vw, 34rem);
  }

  .hero--kundenfoto .hero__body {
    margin-top: 0;
  }
}

@media (min-width: 62rem), (min-width: 40rem) and (max-height: 30rem) {
  .hero--kundenfoto .frame--kundenfoto img {
    object-position: var(--foto-desktop, 60% 50%);
  }

  .hero--kundenfoto .frame--kundenfoto-portrait img {
    width: calc(100% - 8rem);
    margin-left: 8rem;
  }
}

@media (max-width: 61.99rem) and (max-height: 34rem) and (orientation: landscape) {
  .hero--kundenfoto .frame--kundenfoto {
    min-height: 15rem;
  }
}