@media (max-width: 84em) {
  html {
    font-size: 50%;
  }
}

@media (max-width: 59em) {
  html {
    font-size: 44%;
  }

  .gallery {
    height: 40vh;
  }

  .about-text-box {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .section {
    margin-top: 19.2rem;
  }
}

@media (max-width: 59em) {
  html {
    font-size: 31.25%;
  }
}

@media (max-width: 59em) {
  html {
    font-size: 31.25%;
  }

  .main-nav-link {
    margin-right: 1.6rem;
  }

  .gallery {
    height: 38vh;
  }
}

@media (max-width: 34em) {
  html {
    font-size: 25%;
  }

  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    height: 350vh;
    max-width: 78%;
    margin: 0 auto;
  }

  .gallery-img-box {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .section-hero {
    background-position-x: 70%;
    /* background-size: 65%; */
    background-repeat: no-repeat;
  }

  .gallery-img-box-3 {
    background-position: center;
  }

  .stats-text-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 100vh;
    gap: 4.8rem;

    align-items: center;
    justify-content: center;
  }

  .matches {
    align-self: center;
  }

  .runs {
    align-self: center;
  }

  .hundreds {
    align-self: flex-start;
  }

  .strike-rate {
    align-self: flex-start;
  }

  .sixes {
    align-self: flex-start;
  }
  .section-stats {
    background-position-y: 10%;
    background-size: 65%;
  }
}

@media (max-width: 25em) {
  html {
    font-size: 20%;
  }

  .gallery {
    height: 325vh;
  }
}