/*
 * Mobile Landscape - 640px
 * Breakpoint: 480px - 767px
 * Gallery: Shows 7 images (hides images 8-9)
 */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .background-container {
    background-image: url("../assets/640px/bg.jpg");
    background-attachment: scroll;
    /* Prevent background zoom on iOS address bar show/hide */
    height: 100vh;
    min-height: 100vh;
  }

  /* Logo size for 360px */
  .site-name {
    width: 177px;
    height: 29px;
  }

  /* Menu link size for 360px */
  .menu-link-img {
    width: 50px;
    height: 12px;
  }

  /* Close button size for 360px */
  .close-img {
    width: 58px;
    height: 12px;
  }

  /* Menu logo size for 360px */
  .menu-logo-img {
    width: 71px;
    height: 12px;
  }

  /* Menu nav link size for 360px */
  .menu-nav-link {
    font-size: 16px;
    line-height: 22px;
  }

  #about p,
  #contact p {
    font-size: 14px;
    line-height: 20px;
  }

  #about p {
    width: 100%;
    margin-bottom: 14px;
  }

  .sign-up {
    height: 21px;
  }

  #contact p {
    margin-bottom: 0px;
  }

  .home-logo-img {
    width: 71px;
    height: 12px;
  }

  .nav-links {
    top: 14px;
  }

  .home-logo {
    top: 14px;
    left: 20px;
  }

  .menu-close {
    top: 14px;
  }

  .menu-logo {
    top: 14px;
    left: 20px;
  }

  /* Gallery wrapper: override picture width for 36px horizontal gutters */
  .gallery-wrapper picture {
    width: calc(100% - 40px);
  }

  .gallery-wrapper {
    padding-top: 33px;
  }

  /* Hide gallery images 8-9 for 640px (only shows 7 images) */
  .gallery-section[data-gallery-image="8"],
  .gallery-section[data-gallery-image="9"] {
    display: none;
  }

  /* Adjust stack container height for hidden sections (9 total: 1 about + 7 gallery + 1 contact) */
  .stack-container {
    height: calc(9 * 100vh);
  }
}