/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  :root {
    --nav-padding-x: 1.5rem;
    --section-padding-y: 5rem;
    --section-padding-x: 1.5rem;
  }

  .nav {
    padding: 1.4rem var(--nav-padding-x);
  }

  .nav__links {
    gap: 1rem;
  }

  .hero {
    padding: 0 var(--section-padding-x) 4rem;
  }

  .hero__title {
    max-width: 100%;
  }

  .exp-card {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .sample-card {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }

  .footer {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
  }
}