.content-header {
    @apply lg:relative sm:grid lg:block sm:grid-flow-row lg:grid-rows-none bg-white;

    &.hasimage {
        @screen lg {
            min-height: 384px;
        }
    }

    .uhasselt-container-tags {
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .uhasselt-container-tag {
        margin-right: 12px;
        margin-bottom: 8px;
    }

    .mobile-image {
        @apply lg:hidden;

        img {
            @apply w-full;
        }
    }

    .desktop-image {
        @apply hidden;
        @apply lg:block;
    }

    .wrap-image {
        @apply w-full lg:w-1/2 lg:absolute lg:right-0 lg:top-0 lg:bottom-0;

        @screen lg {
            min-height: 384px;
        }

        &:before {
            content: url(/assets/img/square-dots.svg);
            @apply hidden lg:block absolute top-16 left-2;
            width: 157px;
            height: 131px;
        }

        &::after {
            @apply absolute hidden lg:block;
            content: url(/assets/img/down-arrow-small.svg);
            width: 18px;
            height: 126px;
            right: 30%;
            bottom: 50px;
            transform: translateY(calc(100% - 20px));
        }

        .triangle1 {
            background-image: url(/assets/img/triangle-big.svg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            @apply hidden lg:block absolute top-64 left-16;
            width: 66px;
            height: 66px;
        }

        .triangle2 {
            background-image: url(/assets/img/triangle-big.svg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            @apply hidden lg:block absolute top-16 right-24;
            width: 66px;
            height: 66px;
        }

        .picture {
            @apply w-auto sm:h-full;

            @screen lg {
                clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
            }

            img {
                @apply w-full;
                @apply sm:h-full;
                object-fit: cover;
            }
        }
    }

    .uhasselt-container {
        @apply relative;

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

        .column {
            @apply py-8 w-full;

            .mol-breadcrumbs {
                @apply mb-10;
            }

            .heading {
                @apply w-4/5 mb-8 relative;

                &:after {
                    content: url(/assets/img/triangle-big.svg);
                    @apply hidden md:block absolute -top-6 -right-40;
                    width: 66px;
                    height: 66px;
                }
            }

            .paragraph-intro {
                @apply mb-10 md:w-4/5;
            }

            &.has-image {
                @screen lg {
                    width: 45%;
                }

                .heading {
                    @apply w-full;

                    &:after {
                        @apply hidden;
                    }
                }

                .paragraph-intro {
                    @apply w-full;
                }
            }

            .toggle-button-wrap {
                @apply flex flex-wrap lg:mb-0;

                .button-wrap-button {
                    @apply mr-4 mb-4;
                }
            }

            .button-wrap {
                @apply flex flex-wrap mb-4 lg:mb-0;

                .button {
                    @apply mr-4;
                }
            }
        }
    }

    &.red {
        @apply bg-red text-white;

        .heading.text-red {
            @apply text-white;
        }

        a {
            @apply text-white underline;
        }

        .wrap-image:before {
            content: url(/assets/img/square-dots-white.svg);
        }

        .column {
            @apply pt-8;
        }
    }
}

.content-header-extra-padding {
    @screen lg {
        padding-bottom: 150px;
    }
}