@media (min-width: 30rem) {
  .venue__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  :root {
    --content-gutter: clamp(2.5rem, 7vw, 6rem);
    --space-8: 9rem;
  }

  .hero {
    width: min(92%, 84rem);
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .hero__content {
    bottom: clamp(10rem, 20vw, 13rem);
  }

  .envelope-preview__content {
    bottom: clamp(7rem, 16svh, 10rem);
  }

  .hero-countdown {
    bottom: 5.75rem;
  }

  .parking-dialog__panel {
    width: min(85vw, 72rem);
  }

  .envelope-scene {
    width: min(62vw, 27rem);
  }

  .opening-envelope-scene {
    width: min(62vw, 26rem);
  }

  .opening-invitation__recipient {
    bottom: calc(100% - 2.5rem);
  }

  .envelope-preview__names i {
    display: inline;
    margin-inline: 0.08em;
    font-size: 0.76em;
  }

  .hero h1 span {
    display: inline;
    margin-inline: 0.08em;
    font-size: 0.76em;
  }

  .photo-break--invitation {
    width: min(84%, 72rem);
    margin-block: var(--space-7);
  }

  .section-heading {
    margin-bottom: var(--space-6);
  }

  .date-display {
    padding-block: var(--space-5);
  }

  .schedule {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .schedule__item {
    grid-template-columns: minmax(7.5rem, 0.9fr) 1.1fr;
    border-top: var(--line-thin) solid var(--color-line);
  }

  .photo-break--venue > p {
    bottom: var(--space-4);
  }

  .dress-code__photos {
    width: 88%;
    margin-inline: auto;
    gap: var(--space-6);
  }

  .gallery__layout {
    gap: var(--space-7);
  }

  .gallery__pair {
    width: 88%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-left: auto;
  }

  .gallery-photo--pair-lower {
    margin-top: var(--space-7);
  }

  .gallery-photo--left {
    width: 44%;
    margin-left: 7%;
  }

  .gallery-photo--closing {
    width: 84%;
  }

  .footer__content {
    padding-block: 10rem;
  }
}

@media (min-width: 64rem) {
  .hero {
    margin-inline: auto;
  }

  .venue__layout {
    grid-template-columns: minmax(0, 0.96fr) minmax(25rem, 1.04fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
  }

  .venue__photo {
    width: 90%;
  }

  .detail-photos__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    width: min(calc(100% - (var(--content-gutter) * 2)), 68rem);
    gap: clamp(1.5rem, 3vw, 3.5rem);
  }

  .detail-photo--large {
    grid-column: 1 / span 6;
    width: 100%;
  }

  .detail-photo--small {
    grid-column: 7 / -1;
    width: 100%;
    margin-bottom: 8%;
  }

  .dress-code__photos {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    gap: 0;
  }

  .media-frame--dress-main {
    grid-column: 1 / span 8;
    width: 100%;
  }

  .media-frame--dress-detail {
    z-index: 2;
    grid-column: 7 / -1;
    width: 100%;
    margin-top: 9rem;
    margin-left: 0;
    outline: 0.7rem solid var(--color-background);
  }

  .gallery-photo--wide {
    width: 88%;
  }

  .gallery__pair {
    width: 78%;
  }

  .gallery-photo--left {
    width: 34%;
    margin-left: 8%;
  }

  .gallery-photo--closing {
    width: 76%;
  }

  .footer {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(24rem, 1.12fr);
    align-items: center;
  }

  .media-frame--footer {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .footer__content {
    align-self: center;
    padding: clamp(5rem, 10vw, 10rem) var(--space-5);
  }

}

@media (min-width: 90rem) {
  .photo-break--invitation,
  .photo-break--venue,
  .footer {
    max-width: 96rem;
    margin-inline: auto;
  }

  .detail-photo--small {
    margin-bottom: 4rem;
  }
}

@media (max-height: 34rem) and (orientation: landscape) {
  .js.intro-pending .envelope-intro {
    padding-block: max(0.65rem, env(safe-area-inset-top));
  }

  .envelope-scene {
    width: min(52vw, 21rem);
  }

  .js.intro-pending .opening-invitation {
    padding-block: max(0.65rem, env(safe-area-inset-top));
  }

  .opening-envelope-scene {
    width: min(43vw, 16.5rem);
  }

  .opening-invitation__hint {
    margin-top: 0.35rem;
  }

  .opening-invitation__recipient {
    bottom: calc(100% + 0.15rem);
  }

  .opening-invitation__recipient strong {
    font-size: 0.95rem;
  }

  .opening-envelope__guest {
    margin-bottom: 0.28rem;
    font-size: 0.56rem;
  }

  .opening-envelope__guest strong {
    font-size: 0.64rem;
  }

  .opening-envelope__names {
    font-size: 1.4rem;
  }

  .opening-envelope__date {
    margin-top: 0.55rem;
  }

  .opening-envelope__label {
    margin-top: 0.25rem;
  }

  .media-frame--hero .media-placeholder {
    align-content: start;
    padding-top: 1.5rem;
  }

  .hero__content {
    bottom: 7.25rem;
  }

  .envelope-preview__content {
    bottom: 3.5rem;
  }

  .hero-countdown {
    bottom: 1.25rem;
  }

  .hero h1,
  .envelope-preview__names {
    font-size: clamp(2.4rem, 8vw, 4.2rem);
  }

  .hero__meta,
  .envelope-preview__meta {
    margin-top: 0.75rem;
  }

  .scroll-cue {
    display: none;
  }

  .footer__content {
    padding-block: 3rem;
  }

  .footer__line {
    height: 2rem;
    margin-block: 1.25rem;
  }

  .back-to-top {
    margin-top: 1.5rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  html.intro-pending body {
    width: calc(100vw - var(--intro-scrollbar-width, 0px));
  }

  .gallery-photo .media-frame img,
  .detail-photo .media-frame img,
  .venue__photo .media-frame img,
  .dress-code__photos .media-frame img {
    transition: opacity 420ms ease, transform 900ms var(--ease-out);
  }

  .gallery-photo:hover .media-frame img,
  .detail-photo:hover .media-frame img,
  .venue__photo:hover .media-frame img,
  .dress-code__photos .media-frame:hover img {
    transform: scale(1.012);
  }

  .text-button:hover,
  .music-control:hover {
    background: var(--color-text);
    color: var(--color-paper);
  }

  .parking-dialog__close:hover {
    background: var(--color-paper);
    color: var(--color-text);
  }

  .back-to-top:hover {
    background: rgba(255, 255, 255, 0.13);
  }
}