/* =================   ARROW - DOWN  ============== */
.arrow--down {
   margin-block: 1rem 3rem;
   position: relative;
   /* background-color: var(--color-background-white); */
}

.arrow--down__hide-on-scroll {
   visibility: hidden;
}

.arrow--down--hide {
   transition: visibility 0.2s;
}

.arrow--down__arrow {
   position: absolute;
   content: "";
   top: 1.6rem;
   left: 49%;
   width: 1.8rem;
   height: 1.8rem;
   border: solid;
   border-width: 0 0 3px 3px;
   transform: rotate(-45deg) translateX(-50%);
   -webkit-animation: arrow__down 2s infinite 4s, arrow__bg-hide 2s infinite 4s;
   animation: arrow__down 2s infinite 4s, arrow__bg-hide 2s infinite 4s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   opacity: 0;
}

@-webkit-keyframes arrow__bg-hide {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@keyframes arrow__bg-hide {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@-webkit-keyframes arrow__down {
   0% {
      top: 1.6rem;
   }

   30% {
      top: 2.6rem;
      border-color: var(--color-teal-green-prime);
   }

   100% {
      top: 1.6rem;
   }
}

@keyframes arrow__down {
   0% {
      top: 1.6rem;
   }

   30% {
      top: 2.6rem;
      border-color: var(--color-teal-green-prime);
   }

   100% {
      top: 1.6rem;
   }
}