35 lines
1.3 KiB
CSS
35 lines
1.3 KiB
CSS
/* 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-4 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[50px] md:leading-[70px];
|
|
}
|
|
.title-md {
|
|
@apply line-clamp-4 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 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-4 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[20px] md:leading-[30px];
|
|
}
|
|
}
|