.org-usp-banner {
    @apply mb-16;
    @apply lg:flex lg:justify-start;

    .wrap-image {
        @apply w-full lg:w-2/6 xl:w-1/2;
        @apply relative overflow-hidden;

        &:after {
            content: url(/assets/img/triangles.svg);
            @apply absolute;
            @apply top-8 left-0;
            width: 110%;
            height: auto;
            @apply md:top-8 md:-left-32;

            @screen md {
                width: 960px;
                height: auto;
            }
        }

        picture {
            @apply h-full;

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

    .wrap-information {
        @apply px-8 py-8 lg:px-14 lg:py-8 xl:px-20 xl:py-12;
        @apply w-full lg:w-4/6 xl:w-1/2 xl:flex-col;
        @apply relative;

        .wrap-text {
            @apply lg:flex lg:flex-wrap lg:-mx-4;

            .item {
                @apply mb-8 lg:mb-0;
                @apply lg:p-4 lg:w-1/2;
            }
        }

        .wrap-cta {
            @apply absolute;
            @apply w-10/12;
            @apply block;
            @apply md:mt-6;
            @apply md:relative;
            @apply md:ml-8;
            @apply md:w-auto;
            @apply md:inline-block;

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

    &.white {
        @apply bg-white text-black;
    }

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