/* RESPONSIVE */
@media (max-width: 900px) {
  nav {
    padding: 1.25rem 2rem;
  }
  nav ul {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 7rem 2rem 4rem;
  }
  .hero-photo {
    order: -1;
  }
  .photo-frame {
    width: 280px;
    height: 360px;
  }
  section {
    padding: 4rem 2rem;
  }
  .divider {
    margin: 0 2rem;
    width: calc(100% - 4rem);
  }
  .skills-grid {
    grid-template-columns: 1fr;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  footer {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}