.f-hero {
  @apply relative overflow-hidden text-center py-32 px-6;

  background: linear-gradient(to right,
      var(--fuz-hero-from),
      var(--fuz-hero-to));
  color: var(--f-text);
}

.f-hero-bg {
  @apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.4];
}

.f-hero-inner {
  @apply relative max-w-7xl mx-auto text-[var(--f-text)];

  h1 {
    @apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
  }

  h2 {
    @apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
    animation-name: fade-in;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  p {
    @apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
    animation: fade-in 0.3s ease-out forwards;
    animation-delay: calc(var(--delay) * 0.4s);
  }

  p.description {
    @apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
  }
}

.f-hero-cta {
  @apply flex justify-center items-center flex-wrap gap-3 mt-8;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}