/* === Tablet (min-width: 768px) === */
@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h1 {
    font-size: 4rem;
  }

  .section {
    padding: var(--section-padding-y) 8%;
  }
}

/* === Desktop (min-width: 1200px) === */
@media (min-width: 1200px) {
  .nav-desktop {
    display: flex;
  }

  .hamburger {
    display: none;
  }

  .nav-mobile {
    display: none;
  }

  .header-container {
    padding: 0 8%;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h1 {
    font-size: var(--font-size-h1);
  }

  .hero-logo {
    max-width: 450px;
  }

  .section {
    padding: var(--section-padding-y) var(--section-padding-x);
  }
}