.home-header {
  @apply max-w-screen-xl mx-auto px-8 pt-16 xl:pt-8
  mb-16
  container;
  isolation: isolate;

  &__titling {
    @apply max-w-[580px] 
    relative 
    z-10
    lg:absolute 
    mb-[-100px]
    lg:mb-0;
  }
  &__title {
    @apply text-3xl md:text-4xl font-medium mb-6 pt-0 lg:pt-20;
    line-height: 1.2;
  }

  &__scroll-down-indicator {
    @apply bg-primary rounded-full flex justify-center items-center mt-6;
    width: 80px;
    height: 80px;
    &__arrow {
      animation: bouncingArrow 1s 6 alternate cubic-bezier(0.01, 0.61, 0.67, 0.99);
      /* cubic-bezier(0.01, 0.61, 0.39, 1); */
      /* cubic-bezier(0.18, 0.89, 0.3, 1); */
    }
  }

  &__fresque {
    @apply w-full;
    z-index: -1;

    .mobile_pic {
      @apply md:hidden;
    }
    .desktop_pic {
      @apply hidden md:block;
    }
    img {
      @apply w-full h-full max-h-full object-contain;
    }
    @media (max-aspect-ratio: 16 / 9) {
      img {
        /* @apply bg-red-100; */
      }
    }
    @media (min-aspect-ratio: 16 / 9) {
      img {
        /* @apply bg-green-100; */
      }
    }
  }
}
@keyframes bouncingArrow {
  0% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(-6px);
  }
}