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

    &:not(.no-margins)
    {
        @apply mb-16;
    }

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

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

        &:after
        {
            content: url(/assets/img/triangle-big.svg);
            @apply hidden lg:block;
            @apply absolute;
            @apply top-64 left-16;
            width: 66px;
            height: 66px;
        }

        .picture
        {
            @apply w-auto;
            @apply h-full;
                    
            @screen lg
            {
                clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
            }
    
            img
            {
                @apply w-full;
                @apply h-full;
                object-fit: cover;
            }
        }
    }

    .uhasselt-container
    {
        .column
        {
            @apply p-8;
            @apply w-full;

            &.has-image
            {
                @apply lg:w-1/2;
            }

            .breadcrumb
            {
                @apply mb-10;
            }

            .heading
            {
                @apply mb-8;
            }

            .paragraph-intro
            {
                @apply mb-10;
            }

            .email-wrap
            {
                .usp-list
                {
                    @apply p-0;
                    @apply mb-8;
                } 

                > .text
                {
                    @apply w-full;
                    @apply block;
                    @apply text-md;
                    @apply mb-1;
                }
            }
        }
    }

    .umbraco-forms-tooltip
    {
        @apply text-black;
        @apply text-sm;
    }

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

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

        a
        {
            @apply text-white;
        }

        label
        {
            @apply text-white;
        }

        input[type=text]
        {
            @apply text-black;
        }
        
        input[type=submit]
        {
            @apply text-white;
        }

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

        .umbraco-forms-tooltip
        {
            @apply text-black;
            @apply text-sm;
        }
    }
}