@media (max-width: 84em) {
    .heading-primary {
      font-size: 4.4rem;
    }
}

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

    .grid {
      column-gap: 4.8rem;
      row-gap: 6.4rem;
    }

    .header {
      padding: 0 3.2rem;
    }

    .main-nav-list {
      gap: 3.2rem;
    }

}

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

    .main-nav {
      background-color: rgba(255, 255, 255, 0.97);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      transform: translateX(100%);

      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s ease-in;

      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    .nav-open .main-nav {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transform: translateX(0);
    }

    .main-nav-list {
      flex-direction: column;
      gap: 4.8rem;
    }

    .main-nav-link:link,
    .main-nav-link:visited {
      font-size: 3rem;
    }
}

@media (max-width: 44em) {
    .grid--footer {
      grid-template-columns: repeat(6, 1fr);
    }

    .nav-col {
      grid-column: span 2;
    }

    .address-col,
    .logo-col {
      grid-column: span 3;
      grid-row-start: 1;
      margin-bottom: 3.2rem;
    }

    .logo {
        height: 4rem;
    }
}

@media (max-width: 34em) {
    .btn,
    .btn:link,
    .btn:visited {
      padding: 2rem 1.6rem;
    }

    .hero {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-img-box {
        grid-row-start: 1;
    }

}