/* ============ Responsive ============ */

@media screen and (max-width: 1024px) {
  .features .caption {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .features .heading-content .subheader {
    font-size: 1rem;
  }
  .location p {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 768px) {
  p {
    font-size: 0.75rem !important;
    line-height: 1.2;
  }

  .hero {
    background-attachment: scroll;
    background-position-y: center;
    background-position-x: 60%;
    background-size: cover;
  }

  nav .links {
    transform: translateX(-400px);
    flex-direction: column;
    height: 100vh;
    position: absolute;
    width: fit-content;
    top: 0;
    left: 0;
    justify-content: center;
    gap: 8rem;
    font-size: 1.75rem;
    padding: 0 6rem 0 3rem;
    z-index: 222;
    background-color: #061d3a;
    transition: all 0.4s ease;
  }
  nav .menu-icon {
    display: block;
    z-index: 223;
  }

  .location .cards {
    flex-direction: column;
    text-align: center;
  }

  .features h2 {
    font-size: clamp(1.5rem, 4.5vw, 4rem);
    max-width: 220px !important;
  }
  .features .cards {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4rem;
  }

  .gallery .wrapper img {
    min-width: calc(100% / 2) !important;
    width: calc(100% / 2.8) !important;
  }

  .tribute {
    background-position: 80% 0;
    background-attachment: local;
    text-align: center;
    margin: 0 auto;
  }
  .tribute .text {
    margin: 0 auto;
    background-color: rgba(66, 86, 102, 0.527);
    padding: 3rem;
    border-radius: 1.5rem;
  }

  .cta {
    height: fit-content;
  }
  .cta-btn {
    font-size: clamp(1rem, 3vw, 1.5rem) !important;
  }

  footer .wrapper {
    flex-direction: column-reverse;
    gap: 1rem;
  }
  footer .label {
    font-size: 1.25rem !important;
  }
}

@media screen and (max-width: 480px) {
  .hero-content h3 {
    font-size: 1.25rem;
  }
  .hero-content .CTAs {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .hero-content .CTAs .btn {
    max-width: 200px;
  }
  nav .links {
    gap: 3rem;
  }
  .features .heading-content {
    padding: 0 6%;
  }
  .features .heading-content {
    flex-direction: column;
    gap: 1rem;
    justify-items: center;
    align-items: center;
    max-width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
  .features h2 {
    font-size: 2rem;
  }
  .gallery .wrapper img {
    width: 100% !important;
    min-width: 90% !important;
  }
}