/* Responsive Styles */
/* ---- Tablet / small-desktop ---- */
@media (max-width: 1024px) {
  .parallax {
    /* a bit shorter so you see more center */
    --bg-height: 80vh;
  }
  /* first section needs to peek a little higher on tablets */
  .parallax:nth-of-type(1) {
    --bg-pos-y: 25%;
  }
  .parallax:nth-of-type(2) {
    --bg-pos-y: 30%;
  }
}

@media (max-width: 768px) {
  .homepage-links {
    padding: 10px;
    flex-direction: column;
  }

  .container {
    padding: 10px;
  }

  .title-wrapper {
    padding-left: 10px;
    text-align: center;
  }

  .footer-links {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .parallax {
    /* drop the fixed attachment for performance & avoid weird crops */
    background-attachment: scroll;
    --bg-height: 60vh;
    /* center the crop entirely on phones */
    --bg-pos-y: 50%;
  }
  /* each class gets its own “look” on mobile */
  .parallax.rosa {
    --bg-pos-x: 40% !important; /* show more top part */
  }
  .parallax.morgan {
    --bg-pos-x: 90% !important; /* show more top part */
  }
  .parallax.all {
    --bg-pos-x: 3% !important; /* show more top part */
  }
  .parallax.glass {
    --bg-pos-x: 82% !important; /* show more top part */
  }

  /* if you need a tiny adjustment per-image: */
  .parallax:nth-of-type(1) {
    --bg-pos-y: 45%;
  }
  .parallax:nth-of-type(2) {
    --bg-pos-y: 55%;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-text h1 {
    font-size: 2rem;
  }

  .footer-links {
    flex-direction: column;
    gap: 10px;
  }

  main.container {
    padding: 20px 15px;
  }
}

@media (max-width: 480px) {
  .title-wrapper h1 {
    font-size: 2em;
  }

  .subtitle-wrapper .subtitle h3 {
    font-size: 1.5em;
  }

  .subsection-links {
    padding: 10px;
  }
}