@media (max-width: 1100px) {
  .site-header__nav {
    gap: 16px;
  }

  .hero__content {
    width: 52%;
  }

  .footer-club {
    grid-template-columns: 62px 1fr;
  }

  .footer-club > img {
    width: 54px;
    height: 70px;
    grid-row: span 2;
  }

  .footer-club .social-links {
    grid-column: 2;
  }
}

@media (max-width: 860px) {
  .site-header__nav > a:not(.site-header__contact),
  .site-header__nav > i {
    display: none;
  }

  .hero {
    height: 620px;
    background-position: 34% center;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(0, 15, 45, 0.05) 22%, rgba(0, 13, 41, 0.92) 78%, rgba(0, 12, 40, 0.99)),
      linear-gradient(90deg, rgba(0, 16, 48, 0.02), rgba(0, 12, 40, 0.45));
  }

  .hero__content {
    top: auto;
    left: var(--page-gutter);
    right: var(--page-gutter);
    bottom: 64px;
    width: auto;
    height: auto;
    padding: 0 0 0 28px;
  }

  .hero__content::before {
    left: 0;
    top: 50%;
    height: 100%;
  }

  .hero__lead {
    max-width: 520px;
  }

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

  .club-card {
    min-height: 600px;
  }

  .arena {
    min-height: 520px;
    background-position: center;
  }

  .arena::before {
    background: linear-gradient(180deg, rgba(0, 16, 48, 0.04) 20%, rgba(0, 18, 55, 0.72) 62%, rgba(0, 12, 40, 0.99) 100%);
  }

  .arena__content {
    width: 100%;
    min-height: 520px;
    align-content: end;
    padding: 46px 32px;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 14, 45, 0.97) 82%);
  }

  .site-footer__main {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 620px) {
  :root {
    --page-gutter: 12px;
    --radius-large: 18px;
  }

  .site-header {
    top: 12px;
    height: 62px;
    padding: 0 14px;
  }

  .site-header__brand strong {
    max-width: 205px;
    font-size: 0.76rem;
  }

  .site-header__brand span {
    font-size: 0.44rem;
  }

  .site-header__contact {
    width: 42px;
    padding: 0 !important;
    justify-content: center;
    font-size: 0 !important;
  }

  .site-header__contact svg {
    width: 18px;
    height: 18px;
  }

  .hero {
    height: 570px;
  }

  .hero__content {
    bottom: 54px;
  }

  .hero h1 {
    font-size: clamp(3rem, 16vw, 4.4rem);
  }

  .section-heading {
    min-height: 126px;
    padding-inline: 4px;
  }

  .section-heading h2 {
    font-size: clamp(1.85rem, 9vw, 2.5rem);
  }

  .section-heading > span {
    display: none;
  }

  .club-card {
    min-height: 520px;
  }

  .club-card__crest {
    top: 16px;
    right: 16px;
    width: 76px;
    height: 94px;
  }

  .club-card__content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .club-card__content h3 {
    font-size: clamp(2.15rem, 11vw, 3.2rem);
  }

  .action-button {
    width: 100%;
    grid-template-columns: 1fr 54px;
  }

  .action-button span {
    justify-content: center;
    padding-inline: 18px;
  }

  .arena,
  .arena__content {
    min-height: 470px;
  }

  .arena__content {
    padding: 34px 20px;
  }

  .site-footer__main {
    padding: 28px 20px;
  }

  .footer-clubs {
    grid-template-columns: 1fr;
  }

  .footer-club {
    min-height: 106px;
  }

  .site-footer__bottom {
    padding-inline: 20px;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 14vw;
  }

  .section-heading h2 {
    font-size: 7.8vw;
  }

  .club-card__content h3 {
    font-size: 9vw;
  }

  .club-card__content > p:not(.eyebrow) {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}