html {
  scroll-padding-top: 88px;
}

@media (max-width: 650px) {
  .section {
    scroll-margin-top: 76px;
  }

  .invitation .paper-inner {
    min-height: 250vw;
    justify-content: flex-start;
    padding: 69vw 12vw 66vw;
    background-color: #f1e6d2;
    background-image:
      url('assets/invitation-mobile-top.jpg'),
      url('assets/invitation-mobile-bottom.jpg'),
      url('assets/invitation-mobile-middle.jpg');
    background-position: center top, center bottom, center top;
    background-size: 100% auto, 100% auto, 100% auto;
    background-repeat: no-repeat, no-repeat, repeat-y;
  }

  .invitation .paper-inner .formal {
    margin: .6rem 0;
  }

  .invitation .paper-inner h2 {
    margin: 1.2rem 0;
  }

  .invitation .date-lockup {
    margin: 1.3rem auto;
  }

  .invitation .ornament {
    margin-top: 1.2rem;
  }

  .events {
    padding-inline: 7vw;
  }

  .event {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: .85rem;
    padding: 2.6rem 0;
  }

  .event-number {
    grid-column: 1;
    grid-row: 1;
    padding-top: .2rem;
    font-size: .9rem;
  }

  .event > div {
    grid-column: 2;
    min-width: 0;
  }

  .event > div:not(.event-details) {
    grid-row: 1;
  }

  .event-details {
    grid-row: 2;
    margin-top: 1rem;
    text-align: left;
  }

  .event h3 {
    font-size: clamp(2rem, 10vw, 2.8rem);
    line-height: 1.02;
  }

  .event-note {
    font-size: 1.12rem;
    line-height: 1.45;
  }

  .event-dress {
    font-size: .76rem;
    line-height: 1.5;
  }

  .event-meta {
    margin: 0;
    font-size: .72rem;
    line-height: 1.75;
    letter-spacing: .1em;
  }
}