@media (max-width: 1120px) {
  html {
    font-size: 15px;
  }

  :root {
    --spacing-xl: 5.5rem;
  }

  .section-hero {
    padding-top: 8.7rem;
  }
}

@media (max-width: 860px) {
  html {
    font-size: 14px;
  }

  :root {
    --spacing-xl: 4.5rem;
    --spacing-lg: 2.7rem;
  }

  #main-nav {
    width: calc(100% - 1rem);
    padding: 0 1rem;
  }

  .section-about,
  .section-experience,
  .section-work,
  .section-contact {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .about-content {
    padding: 1rem;
  }

}

@media (max-width: 640px) {
  html {
    font-size: 13px;
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  .scroll-indicator::after {
    width: 34px;
  }

  .bg-text {
    font-size: 32vw;
  }

  .site-footer {
    padding-top: 0.9rem;
  }
}