.content-block {
    @apply mb-16;

    .uhasselt-container {
        @apply flex;
        @apply justify-center;
    }

    .heading {
        @apply m-0;
        @apply pl-8 pt-8 md:pt-0 md:pb-8 pr-8;
    }

    &.block-full {
        .uhasselt-container {
            @apply flex-col;
        }

        .picture {
            max-height: 450px;

            img {
                @apply w-full;
                max-height: 450px;
                object-fit: cover;
            }
        }

        .right {
            @apply md:-mt-24;
            @apply md:mr-24;
            @apply md:ml-24;

            .wrapper {
                @apply shadow-2xl;

                .heading {
                    @apply pt-8 pb-0;
                }

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

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

                .head-white {
                    @apply bg-white;
                }

                .usp-list {
                    @apply shadow-none;
                }

                .paragraph-red {
                    @apply bg-red;
                    @apply text-white;
                    @apply p-8 pt-4;

                    a {
                        @apply text-white;
                    }
                }

                .paragraph-white {
                    @apply bg-white;
                    @apply p-8 pt-4;
                }
            }
        }
    }

    &.block-right,
    &.block-left {
        .uhasselt-container {
            @apply flex-col md:flex-row;
        }

        .picture {
            max-height: 410px;
            max-width: 768px;
            @apply relative;
            @apply z-10;

            img {
                @apply w-full;
                max-height: 410px;
                object-fit: cover;
            }
        }

        .left {
            @apply relative;
            @apply z-10;

            @screen md {
                &::after {
                    @apply block absolute;
                    @apply -bottom-14 left-1/4;
                    z-index: 0;
                    content: url(/assets/img/down-arrow-small.svg);
                    width: 18px;
                    height: 126px;
                }
            }
        }

        .right {
            @apply md:mt-8 lg:mt-24;
            @apply md:w-4/5 lg:w-1/2;
            @apply z-10;

            .usp-list {
                @apply md:-ml-64;
            }

            .head-red {
                @apply bg-red md:bg-transparent;
                @apply text-white md:text-black;
            }

            .head-white {
                @apply bg-white md:bg-transparent;
            }

            .paragraph-red {
                @apply bg-red;
                @apply text-white;
                @apply p-8;
                @apply md:-ml-64;
                @apply shadow-xl;

                a {
                    @apply text-white underline;
                }
            }

            .paragraph-white {
                @apply bg-white;
                @apply md:-ml-64;
                @apply p-8;
                @apply shadow-xl;
            }
        }
    }

    &.block-right {
        .uhasselt-container {
            @apply md:flex-row-reverse;
        }

        .right .paragraph-white,
        .right .paragraph-red {
            @apply md:-mr-64;
            @apply md:ml-0;
        }

        .left {
            @screen md {
                &::after {
                    @apply left-auto;
                    @apply right-1/4;
                }
            }
        }
    }
}