@media (max-width: 1199px) {
   :root {
      --section-space: 88px;
      --section-space-compact: 70px;
   }

   .hero__container {
      gap: 44px;
      -ms-grid-columns: minmax(0, 1fr) 44px minmax(320px, 440px);
      grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
   }

   .timeline__list {
      max-width: 720px;
   }
}

@media (max-width: 991px) {
   :root {
      --section-space: 78px;
      --section-space-compact: 64px;
   }

   .container {
      padding-inline: 22px;
   }

   .hero {
      padding-top: 48px;
      padding-bottom: 70px;
   }

   .hero__container {
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      gap: 34px;
   }

   .hero__info {
      max-width: 100%;
      text-align: center;
   }

   .hero__subtitle {
      font-size: 15px;
   }

   .hero__title {
      font-size: clamp(68px, 24vw, 110px);
   }

   .hero__date {
      font-size: 28px;
   }

   .hero__note {
      margin-inline: auto;
      font-size: 22px;
      line-height: 1.5;
   }

   .hero__photo {
      max-width: 560px;
      margin-inline: auto;
   }

   .section-offset--calendar {
      padding-top: 0;
   }

   .timeline__list {
      --timeline-padding-left: 26px;
      --timeline-line-x: 10px;
   }

   .timeline__item {
      -ms-grid-columns: 92px 18px 1fr;
      grid-template-columns: 92px 1fr;
      gap: 18px;
   }

   .invite__text,
   .palette__text,
   .response__text,
   .wishes__content p,
   .place__address span,
   .timeline__content p {
      font-size: 22px;
      line-height: 1.55;
   }

   .response__hint {
      font-size: 19px;
   }
}

@media (max-width: 767px) {
   :root {
      --section-space: 64px;
      --section-space-compact: 56px;
   }

   .container {
      padding-inline: 18px;
   }

   .invite__text,
   .palette__text,
   .response__text,
   .wishes__content p {
      margin-top: 22px;
      font-size: 20px;
      line-height: 1.5;
   }

   .hero__subtitle {
      font-size: 15px;
      letter-spacing: 0.14em;
      color: rgba(61, 49, 44, 0.78);
   }

   .hero__title {
      margin-bottom: 24px;
   }

   .hero__date {
      font-size: 26px;
   }

   .hero__note {
      font-size: 22px;
      line-height: 1.5;
   }

   .place__link,
   .response__btn {
      min-height: 54px;
      padding: 13px 24px;
   }

   .calendar-card__content {
      padding: 24px 16px 20px;
   }

   .dow,
   .days {
      gap: 7px;
   }

   .day {
      font-size: 21px;
   }

   .calendar__signature {
      font-size: 21px;
   }

   .place__name {
      margin-top: 24px;
   }

   .place__address span,
   .response__hint {
      font-size: 19px;
      line-height: 1.5;
   }

   .timeline__list {
      margin-top: 28px;
      padding-left: 0;
   }

   .timeline__list::before {
      left: 8px;
   }

   .timeline__item {
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 12px 0 18px 28px;
   }

   .timeline__item::before {
      left: 3px;
      top: 21px;
   }

   .timeline__time {
      font-size: 28px;
   }

   .timeline__content h3 {
      font-size: 28px;
   }

   .timeline__content p {
      font-size: 20px;
   }

   .palette__composition {
      padding: 10px 16px 6px;
   }

   .response__btn {
      min-width: min(100%, 320px);
      font-size: 20px;
      margin-inline: auto;
   }

   .day.selected::after {
      font-size: 14px;
      bottom: -14px;
   }
}

@media (max-width: 575px) {
   :root {
      --section-space: 56px;
      --section-space-compact: 48px;
   }

   .hero {
      padding-top: 32px;
      padding-bottom: 56px;
   }

   .hero__subtitle {
      margin-bottom: 18px;
      font-size: 15px;
      letter-spacing: 0.14em;
      color: rgba(61, 49, 44, 0.78);
   }

   .hero__title {
      margin-bottom: 20px;
      font-size: clamp(60px, 26vw, 100px);
      line-height: 0.98;
   }

   .hero__date {
      margin-bottom: 12px;
      font-size: 24px;
   }

   .hero__note {
      font-size: 20px;
   }

   .hero__photo {
      padding: 10px;
      border-radius: 24px;
   }

   .hero__img {
      border-radius: 18px;
   }

   .section-title {
      font-size: clamp(30px, 9vw, 40px);
   }

   .invite__text,
   .palette__text,
   .response__text,
   .wishes__content p,
   .place__address span,
   .timeline__content p {
      font-size: 20px;
      line-height: 1.55;
   }

   .response__hint {
      font-size: 17px;
      line-height: 1.45;
   }

   .month {
      font-size: 38px;
   }

   .dow div {
      font-size: 12px;
   }

   .day {
      font-size: 18px;
   }

   .place__link,
   .response__btn {
      width: 100%;
      max-width: 320px;
   }

   .dow,
   .days {
      gap: 6px;
   }

   .day.selected::after {
      font-size: 13px;
      bottom: -12px;
   }

   .palette__composition {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
   }
}