@media (max-width: 820px) {
  .wrap {
    width: min(100% - 30px, 620px);
  }

  .sec_gallery_hero {
    padding: 40px 0 30px;

    .hero-grid {
      margin-top: 28px;
      grid-template-columns: 1fr;
      gap: 28px;
    }

    h1 {
      font-size: clamp(38px, 11vw, 58px);
    }

    .lead {
      font-size: 14px;
    }

    .summary {
      grid-template-columns: repeat(3, 1fr);

      > div {
        padding: 13px 8px;
        display: block;
        border-bottom: 1px solid #9ebdb2;
      }

      dt {
        font-size: 23px;
      }

      dd {
        margin-top: 5px;
        font-size: 10px;
        line-height: 1.45;
      }
    }

    .play-note {
      border-radius: 10px;
      line-height: 1.7;
    }
  }

  .sec_gallery_list {
    padding: 48px 0 55px;

    .section-heading {
      display: block;

      > p {
        margin-top: 10px;
      }
    }
  }

  .sample-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .sample-card {
    border-radius: 15px;

    .poster {
      height: 236px;
    }

    .card-body {
      padding: 21px 20px 23px;
    }

    h3 {
      font-size: 19px;
    }

    p {
      min-height: 0;
    }

    .poster-copy {
      bottom: 25px;
      left: 22px;

      b {
        font-size: 29px;
      }
    }
  }

  .poster-vertical {
    .vertical-copy {
      top: 30px;
      left: 22px;

      b {
        font-size: 28px;
      }
    }

    .alert {
      right: 20px;
      width: 170px;

      &.one {
        top: 98px;
      }

      &.two {
        top: 161px;
        right: 35px;
      }
    }
  }

  .poster-phone {
    > img {
      top: -65px;
      left: -17px;
      height: 385px;
    }

    .phone-copy {
      top: 46px;
      right: 23px;

      b {
        font-size: 37px;
      }
    }
  }

  .gallery-note {
    padding: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}