/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/

/* Spotlight
--------------------------------------------- */

.home > .spotlight {
  background-color: rgb(var(--bg-dark));
  color: rgba(var(--color-light), 1);
}

.home > .spotlight > .container {
  max-width: var(--max-w-full);
  margin: 0 auto;
}

.home > .spotlight figure {
  position: relative;
}

.home > .spotlight figure img {
  object-fit: cover;
  width: 100%;
  height: 65vh;
}

@media (min-width: 720px) {
  .home > .spotlight figure img {
    height: 50vh;
  }
}

.home > .spotlight figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.home > .spotlight figcaption .container {
  max-width: calc(var(--max-w-xl) - 40px);
  margin: 0 auto;
  padding: 4.5rem 20px 3rem;
}

.home > .spotlight figcaption .title {
  margin-bottom: 0.75rem;
}

/* Animations */

.spotlight figcaption :is(.title, .subtitle) {
  visibility: hidden;
}

.spotlight .swiper-slide-active figcaption .title {
  animation: spotlight 400ms;
  animation-delay: 600ms;
  animation-fill-mode: backwards;
  visibility: visible;
}

.spotlight .swiper-slide-active figcaption .subtitle {
  animation: spotlight 400ms;
  animation-delay: 1200ms;
  animation-fill-mode: backwards;
  visibility: visible;
}

@keyframes spotlight {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* SEO
    --------------------------------------------- */

.home > .seo .container {
  max-width: var(--max-w-md);
  margin: 0 auto;
  padding: 3rem 20px;
  display: grid;
  row-gap: 1.5rem;
}

.home > .seo .content p:not(:last-child) {
  margin-bottom: 1.5rem;
}

/* Contact
    --------------------------------------------- */

    .home > .contact .container {
      max-width: var(--max-w-md);
      margin: 0 auto;
      padding: 0 20px 3rem;
 
    }
    
    .home > .contact .title {
      margin-bottom: 0.75rem;
    }

    /* Social Networks
    --------------------------------------------- */

    .home > .social-networks .container {
      max-width: var(--max-w-md);
      margin: 0 auto;
      padding: 0 20px 3rem;
 
    }
    
    .home > .social-networks .title {
      margin-bottom: 0.75rem;
    }

/* Map
    --------------------------------------------- */

    .home > .map .container {
      max-width: var(--max-w-xl);
      margin: 0 auto;
      padding: 0 20px 3rem;
      display: grid;
      row-gap: 1.5rem;
    }
    
    .home > .map .content p:not(:last-child) {
      margin-bottom: 1.5rem;
    }