@layer components {

  .f-section-header {
    @apply text-3xl md:text-4xl font-bold mb-6 text-[--f-header];
  }

  .f-section {
    @apply pt-10 pb-1 mx-2;
  }

  .f-section-center {
    @apply f-section text-center;
  }

  .f-section-grid {
    @apply grid items-center gap-5 max-w-7xl mx-auto;
  }

  .f-section-grid-single {
    @apply grid items-center gap-5 max-w-7xl mx-auto;
  }

  .f-section-grid-single-center {
    @apply f-section-grid-single text-center;
  }

  .f-section-image {
    @apply w-full object-contain;
  }

  .f-image-dimmed {
    @apply opacity-[1];
  }

  .f-section-title {
    @apply text-4xl md:text-5xl font-bold mb-2 text-[--f-header];
  }

  .f-section-nav {
    @apply mt-0 flex justify-center;
  }

}

.f-section-channel {
  @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-2;
}

.f-channel-box {
  @apply flex flex-col items-center p-4 rounded-xl bg-[--f-background] border border-[--f-offers-border] shadow-sm hover:shadow-md transition
}