@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;
   }

   .nav-links a {
      font-size: 20px;
   }

   .arrow-icon {
      width: 80px;
   }

   .arrow-btn--hero {
      top: 22%;
   }
   .arrow-btn--why-me {
      top: 94%;
   }
   .arrow-btn--skills {
      top: 38%;
   }
   .arrow-btn--work {
      top: 94%;
   }
   .arrow-btn--references {
      top: 25%;
   }

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

   .section-label {
      font-size: 36px;
      -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: 15px;
   }

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

   .skills-description {
      font-size: 15px;
   }

   .project-card {
      max-width: 872px;
   }

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

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

   .contact-body {
      gap: 40px;
   }
}