.homepage-header {
    @apply relative;
    z-index: 2;

    > .uhasselt-container {
        @apply grid grid-cols-12 lg:pointer-events-none;
        @apply md:gap-8 lg:gap-0;
        @apply relative z-10;

        .grid-column {
            @apply col-span-12 md:col-span-6 lg:col-span-4;
        }

        .grid-column.list-education {
            @apply col-span-12 lg:col-span-7 pointer-events-auto;
        }

        .cta {
            @apply md:hidden;
            @apply mt-4;

            .button {
                @apply w-full md:w-auto;
            }
        }

        &::before {
            content: url(/assets/img/triangle-big.svg);
            @apply absolute hidden lg:block;
            @apply top-2/4 -left-24;
            width: 66px;
            height: 66px;
            z-index: 10;
        }
    }

    .link-list-wrapper {
        @apply relative lg:w-11/12;
        @apply pointer-events-auto;

        .link-list {
            height: calc(100% - 4rem);
        }

        &.left {
            &::before {
                @apply absolute hidden lg:block;
                @apply right-4;
                @apply fill-current text-black-600;
                content: url(/assets/img/square-dots.svg);
                z-index: -1;
                top: 20px;
                width: 157px;
                height: 131px;
            }

            &::after {
                @apply absolute hidden lg:block;
                content: url(/assets/img/down-arrow.svg);
                width: 24px;
                height: 192px;
                left: 55px;
                bottom: 0;
                transform: translateY(calc(100% - 30px));
            }
        }

        &.right {
            @apply hidden md:block;

            &::after {
                @apply absolute hidden lg:block;
                @apply left-4;
                @apply fill-current text-black-600;
                bottom: -30px;
                content: url(/assets/img/square-dots.svg);
                z-index: -1;
                width: 157px;
                height: 131px;
            }
        }
    }

    .featured-item-wrapper {
        @apply relative lg:absolute right-0 top-0 z-0;
        @apply w-full lg:w-2/3 xl:w-1/2;
        @apply mb-16 md:mb-0;

        &::before {
            content: url(/assets/img/triangle-big.svg);
            @apply absolute hidden lg:block;
            bottom: 40px;
            left: 15px;
            width: 66px;
            height: 66px;
            z-index: 10;
        }

        &::after {
            @apply absolute hidden lg:block;
            content: url(/assets/img/down-arrow.svg);
            width: 24px;
            height: 192px;
            left: 30%;
            bottom: 0;
            transform: translateY(calc(100% - 20px));
        }

        .prev-next {
            @apply h-12 w-12;
        }

        .swiper-pagination {
            @apply block;
            @apply absolute;
            @apply mt-2;
            @apply md:relative;

            .swiper-pagination-bullet {
                @apply mr-2;
                @apply opacity-100;
            }

            .swiper-pagination-bullet-active {
                @apply bg-red;
            }
        }
    }
}