.home-header {
  @apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20 
  mb-24;
  isolation: isolate;

  /* relative */
  /* bg-red-100 */
  /* aspect-ratio: 1.5; */

  /* min-height: 80vh; */
  /* background-color: #fbfff5a6; */
  &__titling {
    @apply max-w-[580px] 
    relative 
    z-10
    lg:absolute 
    mb-[-100px]
    lg:mb-0;
  }
  &__title {
    @apply text-4xl font-medium pb-6 pt-16;
    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 infinite 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;
    @apply bg-purple-50;
    img {
      @apply w-full h-full max-h-full object-contain;
      /* object-position: 100% 100%; */
      @screen lg {
        /* object-position: 100% 0%; */
      }
    }
    @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);
  }
}