.image-text-right {
    display: flex;
    flex-direction: column;

    background-color: var(--Others-Background-light);

    margin-block-end: var(--section-spacing-small);

    @media (max-width: 989px) { margin-block-end: var(--section-spacing-medium); }

    & .image-text-right-separator {
        width: 100%;

        background-color: white;

        & > svg {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    & .image-text-right-wrapper {
        padding-bottom: 90px;
        padding-top: var(--section-spacing-small);

        @media (max-width: 989px) { 
            padding-top: 31px;
            padding-bottom: var(--section-spacing-medium);
        }
    }

    & .image-text-right-inner {
        position: relative;

        gap: 18px;
        display: flex;
        align-items: center;
        flex-direction: row;

        @media (min-width: 990px) { padding-inline: var(--section-main-margin-side) }
        @media (max-width: 989px) { flex-direction: column }

        & .image-text-right-overlay {
            position: absolute;
            inset: 0;

            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);

            pointer-events: none;

            @media (max-width: 989px) { grid-template-columns: repeat(2, 1fr) }

            & .image-text-right-cell {
                position: relative;

                & > .image-text-right-asset {
                    position: absolute;
                    rotate: var(--asset-rotate);
                    filter: blur(var(--asset-blur));

                    & > img {
                        display: block;

                        height: 100%;
                        width: 100%;

                        object-fit: contain;
                    }
                }

                @media (min-width: 990px) {
                    &[data-desktop-order="1"] { order: 1; grid-column: 1; }
                    &[data-desktop-order="2"] { order: 2; grid-column: 2; }
                    &[data-desktop-order="3"] { order: 3; grid-column: 3; }
                    &[data-desktop-order="4"] { order: 4; grid-column: 2;  grid-row: 2; }
                    &[data-desktop-order="5"] { order: 5; grid-column: 4;  grid-row: 2; }
    
                    &[data-desktop-order="1"] > .image-text-right-asset {
                        top: -75px;
                        left: 50%;
    
                        translate: -50% 0;
    
                        max-width: 95px;
                    }
                    &[data-desktop-order="2"] > .image-text-right-asset {
                        top: 20px;
                        left: 50%;
                        translate: -50% 0;
    
                        max-width: 50px;
                    }
                    &[data-desktop-order="3"] > .image-text-right-asset {
                        top: 50px;
                        left: 0px;
                        translate: -50% 0;
    
                        max-width: 132px;
                    }
                    &[data-desktop-order="4"] > .image-text-right-asset {
                        bottom: -35px;
                        left: 50%;
                        translate: -50%;
    
                        max-width: 184px;
                    }
                    &[data-desktop-order="5"] > .image-text-right-asset {
                        top: -15px;
                        right: -10px;
    
                        max-width: 140px;
                    }
                }

                @media (max-width: 989px) {
                    &:not([data-mobile-order]) { display: none }

                    &[data-mobile-order="1"] { order: 1; grid-column: 2; grid-row: 1 }
                    &[data-mobile-order="2"] { order: 2; grid-column: 2; grid-row: 2 }

                    &[data-mobile-order="1"] > .image-text-right-asset {
                        top: -18px;
                        right: 15px;
                        max-width: 120px;
                    }

                    &[data-mobile-order="2"] > .image-text-right-asset {
                        bottom: -20px;
                        right: 50px;
                        translate: 0 100%;
                        max-width: 100px;
                    }
                }
            }
        }

        & > * { 
            @media (min-width: 990px) { flex: 1 }
        }

        & .image-text-right-thumbnail {
            position: relative;

            width: 100%;
            aspect-ratio: 1;

            border-radius: 30px;

            overflow: hidden;

            @media (max-width: 989px) { border-radius: 24px }

            &.image-text-right-thumbnail--mobile {
                @media(min-width: 990px) { display: none }
            }

            &.image-text-right-thumbnail--desktop {
                @media(max-width: 989px) { display: none }
            }

            & > img {
                position: absolute;
                inset: 0;

                width: 100%;
                height: 100%;

                object-fit: cover;
            }
        }

        & .image-text-right-container {
            gap: 18px;
            display: flex;
            flex-direction: column;

            @media (min-width: 990px) { padding-right: 54px; }
            @media (max-width: 989px) { gap: var(--section-spacing-title) }

            & .image-text-right-content {
                gap: 18px;
                display: flex;
                flex-direction: column;
            }

            & .image-text-right-title {
                width: fit-content;

                & > span {
                    display: block;

                    &:last-child { color: var(--Primary-Vibrant-pink) }
                }
            }

            & .image-text-right-richtext {
                font-weight: 500;
                font-family: var(--font-family-paragraph);
                font-size: var(--font-paragraph-large-size);
                line-height: var(--font-paragraph-large-line-height);
                color: var(--Secondary-Soft-dark-100);
            }

            & .button { 
                @media (min-width: 990px) { width: fit-content; }
            }
        }
    }
}