/* Compact the mobile transitions while keeping the hero full screen. */
@media (max-width: 760px) {
  .story {
    min-height: 0;
    grid-template-rows: auto 27dvh;
  }

  .story-copy {
    justify-content: flex-start;
    padding: 46px 5vw 34px;
  }

  .story-media {
    min-height: 27dvh;
  }

  :root[data-option="1"] .catalog {
    min-height: 91dvh;
    padding-bottom: 12px;
  }

  .promise {
    min-height: 0;
    display: block;
  }

  .promise-inner {
    padding: 78px 0 72px;
  }

  .promise h2 {
    margin: 23px 0 31px;
  }

  .promise-tags {
    margin-top: 24px;
  }

  .contact {
    min-height: 0;
    display: block;
    padding-bottom: 22px;
  }

  .contact-inner {
    padding: 78px 0 45px;
  }

  .contact .footer {
    position: relative;
    bottom: auto;
    padding-top: 15px;
  }
}