/* Rendimiento de renderizado: conserva el aspecto y difiere lo que está fuera de pantalla. */
.hero {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .08));
  background-color: var(--stone);
}

.work,
.packages,
.about,
.locations,
.contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.project-reel,
.hero-carousel {
  transform: translateZ(0);
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (hover: none), (pointer: coarse) {
  .project-image span {
    transform: none;
  }

  .project-image:hover img {
    transform: none;
  }

  .circle-link,
  .social-button,
  .contact-links a,
  footer a {
    min-height: 44px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  nav {
    gap: 1.5rem;
  }

  .nav-links {
    gap: clamp(14px, 2.2vw, 26px);
  }

  .section-head {
    grid-template-columns: .7fr 1.7fr 1fr;
  }

  .project-grid {
    gap: 7vw 4vw;
  }

  .about {
    gap: 5vw;
    padding-inline: 5vw;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .hero {
    min-height: 100svh;
  }

  .logo {
    max-width: min(52vw, 190px);
  }

  .project-image span {
    right: 12px;
    bottom: 12px;
  }

  .about,
  .contact,
  .locations,
  .packages,
  .work {
    contain-intrinsic-size: auto 700px;
  }
}

@media (max-width: 380px) {
  .hero,
  .work,
  .about,
  .contact {
    padding-left: 16px;
    padding-right: 16px;
  }

  .project h3 {
    font-size: 24px;
  }

  .hero-bottom p {
    font-size: 13px;
  }
}