@media (max-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    grid-template-areas: "body photo";
    gap: 28px;
  }

  .hero__vertical {
    display: none;
  }

  .hero__photo {
    width: 100%;
    transform: translateX(0);
    justify-self: end;
  }

  .hero__socials {
    display: none;
  }

  .mark--scribble,
  .mark--smiley,
  .hero__sig {
    display: none;
  }

  .info__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .booking-card {
    min-height: 320px;
  }

  .releases-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item {
    grid-column: span 6;
  }

  .gallery-item--tall,
  .gallery-item--med,
  .gallery-item--wide {
    grid-column: span 6;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
  }

  .nav__list,
  .nav__book {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "body";
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .hero__photo {
    justify-self: center;
    width: min(100%, 480px);
    transform: none;
    margin-top: 12px;
  }

  .hero__photo img {
    mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 96%, transparent 100%);
  }

  .hero__title {
    margin-top: 0;
  }

  .hero__sub {
    font-size: 30px;
  }

  .hero__marks {
    display: none;
  }

  .info__grid {
    gap: 12px;
  }

  .booking-card img {
    min-height: 260px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 14px;
  }

  .footer__block--left,
  .footer__block--right {
    align-items: center;
    text-align: center;
  }

  .footer__monogram {
    margin: 0 auto;
  }

  .site-footer::before {
    height: 4px;
  }

  .releases-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .event-row {
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
  }

  .event-row__day {
    font-size: 40px;
  }

  .gallery-item,
  .gallery-item--tall,
  .gallery-item--med,
  .gallery-item--wide {
    grid-column: span 12;
  }

  .gallery-aspect--wide {
    aspect-ratio: 1 / 1.1;
  }

  .lightbox__btn--prev {
    left: 8px;
  }

  .lightbox__btn--next {
    right: 8px;
  }

  .booking-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stats {
    gap: 28px;
  }

  .show-detail__layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .show-detail__tickets {
    grid-column: 1 / -1;
  }

  .track-detail__header {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .track-detail__cover {
    width: min(260px, 70vw);
  }

  .track-detail__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 420px) {
  .hero__title {
    font-size: clamp(88px, 26vw, 140px);
  }
}