@media (min-width: 769px) and (max-width: 1024px) {
   :root {
      --nav-width: 100px;
   }

   .nav-logo {
      width: 80px;
      height: 80px;
   }

   .logo-initials {
      font-size: 20px;
   }

   .nav-links {
      gap: 24px;
   }

   .arrow-icon {
      width: 80px;
   }

   .arrow-btn--hero {
      top: 275px;
   }
   .arrow-btn--why-me {
      top: calc(100% - 80px);
   }
   .arrow-btn--skills {
      top: calc(50% - 153px);
   }
   .arrow-btn--work {
      top: calc(100% - 80px);
   }
   .arrow-btn--references {
      top: 305px;
   }

   .section {
      padding: 80px 80px 80px 10px;
   }

   .section-label {
      -webkit-text-stroke: 1px var(--color-main);
   }

   .hero-header {
      padding: 0 60px 0 20px;
      gap: 24px;
   }

   .about-body {
      max-width: 700px;
   }

   .about-description {
      font-size: 16px;
   }

   .skills-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
   }

   .skill-item {
      font-size: 16px;
   }

   .skill-item img,
   .skill-icon {
      width: 48px;
      height: 48px;
   }

   .project-number {
      font-size: 72px;
   }

   .contact-form {
      width: 100%;
      max-width: 380px;
   }

   .contact-body {
      gap: 40px;
   }

   .about-body {
      padding-right: 100px;
   }

   .skills-content {
      padding-right: 100px;
   }

   .projects-grid {
      padding-right: 100px;
   }

   .references-content {
      padding-right: 100px;
   }
}

@media (max-width: 940px) {
   .reference-card {
      flex-direction: column;
      gap: 8px;
   }

   .reference-divider {
      width: 100%;
      height: 1px;
      align-self: auto;
   }
}