/* HOME */

.page--home {
 .intro {
  .intro__title {
   font-size: 2rem;
   font-weight: 600;
   line-height: 1;
  }

  .intro__button {
   background-color: rgb(99, 138, 55, 0.6);
   border: 2px solid #fff;
   color: #fff;
   font-size: 1rem;
   letter-spacing: 2px;

   &:hover,
   &:focus {
    background-color: var(--brand-green, #638A38);
   }
  }

  .intro__item--video-container {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   aspect-ratio: 10/7;

   video {
    height: 100%;
    object-fit: cover;
    width: 100%;
    max-width: 100vw;
   }

   #pause-play {
    opacity: .6;
    right: 0;
    scale: 1;
    top: .5rem;

    &:hover {
     opacity: 1;
    }
   }
  }

 }



 .carousel {
  .slick-arrow {
   width: 3.5rem;
   z-index: 1;

   img {
    background-color: #ffffff;
    border: 2px solid var(--brand-green, #638A38);
    border-radius: 50%;
    padding: .75rem;
   }

   &:hover,
   &:focus {
    background-color: #d0d0d0;
   }
  }

  .slick-prev:before,
  .slick-next:before {
   content: "";
  }

  .slick-prev {
   left: 10px;
  }

  .slick-next {
   right: 10px;
  }

  .carousel__item--bonus-gift-card-link {
   position: absolute;
   bottom: 16%;
   width: 100%;
   left: 0%;
   height: 12%;
  }

  .carousel__item--purchase-gift-card-button {
   position: absolute;
   bottom: 0%;
   width: 100%;
   left: 0%;
   height: 12%;
  }
 }

 .features {
  .features__container {
   gap: 2.75rem;
  }

  .features__item {
   margin-bottom: 1.4rem;
  }

  .features__title {
   font-size: 2rem;
   font-weight: 700;
   font-family: "Seasons52bold-Bold", 'Comic Sans MS',
    'Arial Rounded MT Bold',
    cursive;
  }

  .features__subtitle {
   font-size: 1.75rem;
   font-weight: 700;
   font-family: "Seasons52bold-Bold", 'Comic Sans MS',
    'Arial Rounded MT Bold',
    cursive;
   line-height: 1;
  }

  .features__description {
   color: var(--brand-gray, #5f6751);
   font-size: 1rem;
   line-height: normal;
   text-wrap: balance;
  }

  .features__button {
   border: 2px solid var(--brand-dark-gray, #5c5649);
   border-radius: 0;
   color: var(--brand-dark-gray, #5c5649);
   font-size: 1.25rem;
   line-height: 1;
   padding: .75rem 1rem;
  }

  .features__button:hover,
  .features__button:focus {
   background-color: var(--brand-dark-gray, #5c5649);
   color: #ffffff;
  }

 }


 @media (min-width: 480px) {
  .intro {
   .intro__title {
    font-size: 3rem;
   }

   .intro__button {
    font-size: 1.25rem;
   }
  }

  .features {
   .features__title {
    font-size: 2.5rem;
   }

   .features__subtitle {
    font-size: 2rem;
   }
  }

 }

 @media (min-width: 576px) {
  .features {
   .features__title {
    font-size: 3rem;
   }

   .features__subtitle {
    font-size: 2.5rem;
   }

   .features__description {
    font-size: 1.25rem;
   }

  }

 }

 @media (min-width: 640px) {
  .carousel {
   .carousel__item--bonus-gift-card-link {
    position: absolute;
    bottom: 35%;
    width: 54%;
    left: 30%;
    height: 12%;
   }

   .carousel__item--purchase-gift-card-button {
    position: absolute;
    bottom: 0%;
    width: 100%;
    left: 0%;
    height: 26%;
   }
  }


 }

 @media (min-width: 768px) {
  .intro {
   .intro__title {
    font-size: 4rem;
   }
  }
 }

 @media (min-width: 992px) {
  .intro {
   .intro__button {
    font-size: 2.5rem;
   }
  }



  .features {
   .row {
    gap: unset;
   }

   .features__subtitle {
    font-size: 1.75rem;
   }
  }



 }

 @media (min-width: 1200px) {

  .intro {
   .intro__item--video-container {
    aspect-ratio: 21/12;
   }

   .intro__title {
    font-size: 5rem;
   }
  }

 }

 @media (min-width: 1366px) {
  .features {
   .features__title {
    font-size: 4.5rem;
   }

   .features__subtitle {
    font-size: 2.125rem;
   }

   .features__button {
    font-size: 1.5rem;
   }
  }
 }

 @media (min-width: 1400px) {

  .intro {
   .intro__item--video-container {
    aspect-ratio: 21/9;
   }
  }

  .features {
   .container {
    max-width: 1320px;
   }

   .features__subtitle {
    font-size: 2.25rem;
   }
  }
 }

 @media (min-width: 1500px) {
  .features {
   .features__subtitle {
    font-size: 2.5rem;
   }
  }
 }
}