/* v0.6 S4: work-to-run transition */
.s4-transition {
  padding: clamp(6rem, 8vw, 8rem) 0;
  overflow: hidden;
  background: #111;
  color: #fff;
}

.s4-transition__inner {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
  gap: clamp(2.5rem, 3.9vw, 3.5rem);
  align-items: center;
}

.s4-transition__copy {
  min-width: 0;
}

.s4-transition__title {
  font-size: clamp(3rem, 3.7vw, 3.3rem);
  line-height: 1.3;
}

.s4-transition__media {
  display: block;
  width: 100%;
  aspect-ratio: 2000 / 1334;
  overflow: hidden;
}

.s4-transition__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .s4-transition {
    padding: 4.5rem 0 max(8.25rem, calc(7rem + env(safe-area-inset-bottom)));
  }

  .s4-transition__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .s4-transition__title {
    font-size: clamp(2.35rem, 10vw, 2.5rem);
    line-height: 1.27;
  }

  .s4-transition__media {
    aspect-ratio: 1;
  }
}

@media (max-width: 380px) {
  .s4-transition {
    padding-top: 4rem;
    padding-bottom: max(7.75rem, calc(6.5rem + env(safe-area-inset-bottom)));
  }

}