@layer base {
    div.hero-swiper div.hero-banner.swiper-slide {
        @apply
        cursor-default
        h-[calc(100svh-45px)]
        sm:h-[calc(65svh)]
        lg:h-[calc(100svh-45px)]
        xl:h-[calc(100svh-60px)];
    }

    div.hero-swiper .swiper-pagination {
        @apply bottom-4 lg:bottom-6 xl:bottom-8;
    }

    div.hero-swiper .swiper-button-next,
    div.hero-swiper .swiper-button-prev {
        @apply border-white hover:bg-tlx-white-outline-hover hidden lg:flex;
    }

    div.hero-swiper .swiper-button-next {
        @apply right-16;
    }

    div.hero-swiper .swiper-button-prev {
        @apply left-16;
    }

    .autoplay-progress {
        @apply
        absolute
        bottom-8
        flex
        font-normal
        h-10
        lg:h-16
        items-center
        justify-center
        right-2
        lg:right-6
        text-tlx-blue
        w-20
        z-10;
    }

    .autoplay-progress svg {
        --progress: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        stroke-width: 2px;
        stroke: #fff;
        fill: none;
        stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
        stroke-dasharray: 125.6;
        transform: rotate(-90deg);
    }

    div.latest-news-tag-button {
        @apply button-sm-border border-tlx-mid-grey text-tlx-mid-grey hover:bg-tlx-light-grey;
    }

    div.latest-news-tag-button.active {
        @apply border-0 button-sm bg-tlx-blue text-white hover:bg-tlx-blue-hover;
    }

    .news-wrapper {
        @apply py-16 lg:pt-32 relative text-center;
    }

    .news-wrapper .articles-wrapper {
        @apply flex flex-col flex-wrap gap-4 items-center justify-start max-w-screen-2xl mx-[auto] pt-8 xl:flex-row xl:justify-center;
    }

    #home-product-highlights .products-swiper {
        @apply w-full;
    }

    #home-product-highlights .swiper-slide {
        @apply cursor-grabbing flex flex-col justify-between overflow-hidden rounded-40;
    }

    #home-product-highlights .swiper-slide .product-description {
        @apply min-h-[200px] xl:min-h-[220px] pb-10 px-10 text-left flex flex-col justify-between;
    }

    #home-product-highlights .swiper-slide:nth-child(1n+0) {
        @apply bg-tlx-light-blue;
    }

    #home-product-highlights .swiper-slide:nth-child(1n+0) * {
        @apply text-tlx-dark-blue;
    }

    #home-product-highlights .swiper-slide:nth-child(1n+0) .button-sm-border {
        @apply border-tlx-dark-blue;
    }

    #home-product-highlights .swiper-slide:nth-child(2n+0) {
        @apply bg-tlx-light-grey;
    }

    #home-product-highlights .swiper-slide:nth-child(2n+0) * {
        @apply text-tlx-dark-blue;
    }

    #home-product-highlights .swiper-slide:nth-child(2n+0) .button-sm-border {
        @apply border-tlx-dark-blue;
    }

    #home-product-highlights .swiper-slide:nth-child(3n+0) {
        @apply bg-tlx-dark-blue;
    }

    #home-product-highlights .swiper-slide:nth-child(3n+0) * {
        @apply text-white;
    }

    #home-product-highlights .swiper-slide:nth-child(3n+0) .button-sm-border {
        @apply border-white;
    }

    #home-product-highlights .products-swiper .swiper-slide {
        @apply w-[calc(100%-5rem)] sm:w-[calc(50%-2rem)] max-w-[485px] sm:min-h-[440px] md:min-h-[500px] xl:min-h-[656px];
    }

    #home-product-highlights .products-swiper .swiper-slide:last-of-type,
    #home-latest-wrapper .news-swiper .swiper-slide:last-of-type,
    #sustainability-paths-swiper .swiper-slide:last-of-type {
        @apply mr-6 2xl:mr-0;
    }

    #home-latest-wrapper .news-swiper.swiper .swiper-wrapper .home-latest-card.swiper-slide {
        @apply w-[calc(100%-5rem)] sm:w-[calc(50%-2rem)] lg:w-[calc(33%-2rem)] bg-tlx-light-grey cursor-default overflow-hidden rounded-40;
    }

    #events-wrapper .swiper-button-prev {
        @apply bg-[url("../images/arrow-left-dark-blue-95524b17f2cfda7ba08dbc74e95754af.svg")] -left-12;
    }

    #schahlled-modal,
    #schahlled-modal .modal-content {
        @apply z-[60]
    }
}