/* ---------- iPad & Tablet ---------- */
@media (max-width: 1024px) {
  .container, .section, .zoom-item {
    width: 90%;
    margin: 0 auto;
  }
}

/* ---------- Mobile Landscape ---------- */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ---------- Mobile Portrait ---------- */
@media (max-width: 480px) {
  h1 { font-size: 1.4rem; }
  p { font-size: 0.9rem; }
  button { padding: 0.5rem 1rem; }
}