html,
body {
  max-width: 100%;
  overflow-x: clip;
}

main,
section,
header,
footer,
.hero > *,
.split > *,
.head > *,
.film > *,
.milestones article > * {
  min-width: 0;
}

img {
  max-width: 100%;
}

@media (max-width: 850px) {
  header,
  .hero,
  .section {
    width: 100%;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    overflow: hidden;
  }

  .hero aside {
    transform: none;
  }

  .hero-photo {
    transition: none;
  }

  .hero aside:hover .hero-photo {
    transform: none;
  }
}

@media (max-width: 520px) {
  h1,
  h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .badge,
  .eyebrow,
  .role,
  .games p span,
  .games p b,
  .games p strong {
    overflow-wrap: anywhere;
  }

  .quick div,
  .stats article,
  .rankings article,
  .news a,
  .games p {
    min-width: 0;
  }
}