/* Layout Utility Classes */
@layer components {
  .section-container {
    @apply relative h-[640px] md:h-[1000px];
  }

  .section-content {
    @apply relative h-full flex flex-col items-center justify-center text-center px-[20px] sm:px-[40px];
  }

  .border-line {
    @apply overflow-hidden relative rounded-[4px] md:rounded-lg
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
    after:border after:border-white/10 after:rounded-[4px] after:md:rounded-lg;
  }

  /* Title Utility Classes */
  .title-lg {
    @apply line-clamp-3 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[50px] md:leading-[70px];
  }
  .title-md {
    @apply line-clamp-2 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[42px] md:leading-[56px];
  }
  .title-sm {
    @apply line-clamp-2 text-[16px] font-[500] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[24px] md:leading-[34px];
  }
  .title-xs {
  }

  /* Description Utility Classes */
  .description-lg {
    @apply line-clamp-3 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[20px] md:leading-[30px];
  }
}