/**

    Mission Block Pattern

*/

.mission,
.editor-styles-wrapper .mission {
    margin: 0 0 10.5rem;
    padding: 10.5rem 0;

    @media only screen and (max-width: $tablet) {
        padding: 4.8rem 0;
    }

    div.wp-block-media-text {

        @media only screen and (max-width: $tablet) {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .wp-block.rich-text {
            margin-left: 0;
            margin-right: 0;
        }

        .wp-block-media-text__media {
            border-radius: 1rem;
            overflow: hidden;
    
            img {
                height: auto;
                object-fit: cover;
            }

            @media only screen and (max-width: $tablet) {
                align-self: flex-start;
                margin-bottom: 2.4rem;
                max-width: 30rem;
                width: 100%;
            }
        }
    
        .wp-block-media-text__content {
            padding: 4rem;
            
            @media only screen and (min-width: $tablet) {
                padding: 10rem;
            }
        }
    
        &.has-media-on-the-right {
            .wp-block-media-text__content {
                padding: 1rem 4rem 1rem 0;
                
                @media only screen and ($tablet) {
                    padding: 2.4rem 15rem 2.4rem 0;
                }
            }
        }
    }

    .wp-block-separator {
        &::after {
            content: '';
            position: relative;
            display: block;
            height: 3px;
            width: 35%;
            top: -3px;
            left: 100%;
            transform: translateX(-100%);
            background-color: $primary;
        }
    }

}


// Editor Styles
.editor-styles-wrapper .mission {
    div.wp-block-media-text {
        padding-top: 0;
        padding-bottom: 0;
    }
}