.org-image-and-text-block {
    .wrapper {
        @apply grid;
        @apply gap-8 lg:gap-32;

        @screen md {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        .mol-title,
        .atm-paragraph {
            @apply mb-8;
        }
    }

    .first {
        @apply md:order-2;
    }

    .second {
        @apply md:order-1;
    }

    &.image-right {
        .first {
            @apply md:order-1;
        }

        .second {
            @apply md:order-2;
        }
    }

    .media-image {
        @apply relative py-6 pl-12;
        @apply md:py-8 md:pl-16;
        @apply lg:py-12 lg:pl-24;

        &::before {
            content: '';
            width: calc(100% - 6rem);
            height: 100%;
            @apply absolute left-0 top-0;
            @apply bg-primary-100;
            clip-path: polygon(0 0, 85% 0, 67% 100%, 0% 100%);
        }

        .atm-image {
            @apply relative;
            @apply z-10;
        }
    }
}