.about-intro {
  display: grid;
  grid-template-columns: var(--intro-label-width) minmax(0, 34rem);
  gap: var(--intro-gap);
  width: max-content;
  max-width: calc(100% - 2.5rem);
  margin-left: calc(var(--logo-axis) - var(--intro-label-width) / 2);
  padding: clamp(13rem, 17vw, 16rem) 0 clamp(7rem, 10vw, 10rem);
}

.about-intro h1 {
  align-self: start;
  margin: 0;
  color: var(--orange);
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--intro-label-size);
  font-weight: 650;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.about-intro__copy {
  max-width: 34rem;
}

.about-intro__copy h2,
.team-copy h2,
.origin-story h2 {
  margin: 0 0 1.35rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--intro-copy-size);
  font-weight: 650;
  line-height: 1.08;
}

.about-intro__lead {
  color: var(--indigo);
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--intro-copy-size);
  font-weight: 600;
  line-height: 1.12;
}

.about-intro__copy p,
.team-copy p,
.origin-story p {
  margin: 0 0 1.35em;
  color: var(--body-copy);
  font-size: var(--body-copy-size);
  line-height: 1.45;
}

.location-feature {
  position: relative;
  min-height: clamp(31rem, 48.6vw, 44rem);
  overflow: hidden;
  background: var(--indigo);
}

.location-feature__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-feature__claim {
  position: absolute;
  z-index: 2;
  top: 13%;
  left: 8%;
  width: 34%;
  margin: 0;
  color: var(--paper);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 650;
  line-height: .9;
  text-align: center;
  text-shadow: .035em .045em .06em rgb(0 0 0 / .2);
}

.location-feature__animal {
  position: absolute;
  z-index: 2;
  width: clamp(36rem, 58vw, 62rem);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  pointer-events: none;
}

.location-feature__animal--toucan {
  left: -13%;
  bottom: -16%;
}

.location-feature__animal--horse {
  right: -13%;
  bottom: -15%;
}

.team-copy,
.origin-story {
  width: min(calc(100% - 2.5rem), 42rem);
  margin: 0 auto;
  padding: clamp(6rem, 9vw, 9rem) 0;
}

.painting-stage {
  display: grid;
  place-items: center;
  min-height: clamp(35rem, 58vw, 52rem);
  padding: clamp(3rem, 6vw, 6rem) 1.25rem;
  background: url("../Material/Grafiken_Web/Gemaelde-Ocker-Indigo-Coburg-Veste.jpg") center / cover fixed no-repeat;
}

.painting-stage img {
  width: min(68vw, 58rem);
  height: auto;
  filter: drop-shadow(0 .7rem 1rem rgb(67 44 24 / .18));
}

.origin-story {
  padding-bottom: clamp(8rem, 12vw, 12rem);
}

.origin-story__figure {
  width: min(72%, 25rem);
  margin: 3.5rem 0;
}

.origin-story__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.about-intro.motion-ready h1,
.team-copy.motion-ready > *,
.origin-story.motion-ready > * {
  opacity: 0;
}

.about-intro.motion-ready h1 {
  transform: rotate(180deg);
}

.team-copy.motion-ready > *,
.origin-story.motion-ready > * {
  transform: translateY(1.5rem);
}

.about-intro.motion-visible h1 {
  opacity: 1;
  transform: rotate(180deg);
  transition: opacity .8s cubic-bezier(.2, .72, .22, 1), transform .8s cubic-bezier(.2, .72, .22, 1);
}

.team-copy.motion-visible > *,
.origin-story.motion-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .8s cubic-bezier(.2, .72, .22, 1), transform .8s cubic-bezier(.2, .72, .22, 1);
}

.team-copy.motion-visible > :nth-child(2),
.origin-story.motion-visible > :nth-child(2) { transition-delay: .12s; }

.team-copy.motion-visible > :nth-child(3),
.origin-story.motion-visible > :nth-child(3) { transition-delay: .22s; }

.team-copy.motion-visible > :nth-child(4),
.origin-story.motion-visible > :nth-child(n+4) { transition-delay: .32s; }

.location-feature.motion-ready,
.painting-stage.motion-ready {
  opacity: 0;
}

.location-feature.motion-visible,
.painting-stage.motion-visible {
  opacity: 1;
  transition: opacity 1.1s cubic-bezier(.2, .72, .22, 1);
}

@media (max-width: 760px) {
  .about-intro {
    grid-template-columns: 1.85rem minmax(0, 1fr);
    gap: .9rem;
    width: auto;
    max-width: none;
    margin-left: 1.15rem;
    padding: 8.5rem 1.15rem 6rem 0;
  }

  .about-intro h1 {
    font-size: 1.65rem;
  }

  .about-intro__copy h2 {
    font-size: var(--intro-copy-size);
  }

  .team-copy h2,
  .origin-story h2 {
    font-size: 1.45rem;
  }

  .about-intro__lead {
    font-size: var(--intro-copy-size);
  }

  .about-intro__copy p,
  .team-copy p,
  .origin-story p {
    font-size: .95rem;
    line-height: 1.45;
  }

  .location-feature {
    min-height: 36rem;
  }

  .location-feature__photo {
    object-position: 61% center;
  }

  .location-feature__claim {
    top: 2rem;
    left: 0;
    width: 58%;
    font-size: 2.65rem;
  }

  .location-feature__animal {
    width: 31rem;
  }

  .location-feature__animal--toucan {
    left: -13rem;
    bottom: -3rem;
  }

  .location-feature__animal--horse {
    right: -12rem;
    bottom: -3rem;
  }

  .team-copy,
  .origin-story {
    width: auto;
    margin: 0;
    padding: 5rem 1.15rem;
  }

  .painting-stage {
    min-height: 27rem;
    padding: 2.5rem 1rem;
    background-attachment: scroll;
  }

  .painting-stage img {
    width: 94vw;
  }

  .origin-story__figure {
    width: 82%;
    margin: 2.5rem 0;
  }
}