﻿.pattern-image-text {
    position: relative;
    margin: 65px 0;
}

.pattern-image-text__img {
    position: relative;
    padding-bottom: 35px;
}

.pattern-image-text__img-left {
    padding: 0 25px 0 43px;
}

.pattern-image-text__img-left img {
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(62,38,57,0.26);
}

.pattern-image-text__pattern {
    height: 120px;
    right: 12px;
    bottom: 0;
    background-color: #F0F5FF;
    border-radius: 5px;
    border-bottom-right-radius: 15px;
    width: 500%;
    position: absolute;
    z-index: -1;
}

.pattern-image-text__text {
    padding-top: 40px;
}

.pattern-image-text__text h4:not([class*="heading"]) {
    color: #972AB2;
}

.pattern-image-text__img-right {
    padding: 0 43px 0 25px;
}

.pattern-image-text__img-right img {
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(62,38,57,0.26);
}

.pattern-image-text--right .pattern-image-text__pattern {
    left: 10px;
    border-bottom-left-radius: 15px;
}

.pattern-image-text__pattern img {
    float: right;
    max-width: 1034px;
}

.flex-pattern-image-text--reverse .pattern-image-text__pattern img {
    float: none;
}

.pattern-image-text__text ul li .icon--checked {
    position: absolute;
    left: 0;
}

@media (min-width: 768px) {

    .pattern-image-text {
        margin: 97px 0;
    }

    .pattern-image-text__img {
        position: relative;
        padding-bottom: 51px;
    }

    .pattern-image-text__pattern {
        height: 172px;
    }

    .pattern-image-text {
        padding: 0 58px;
    }

    .pattern-image-text__img-left {
        padding: 0 34px 0 134px;
    }

    .pattern-image-text__img-right {
        padding: 0 134px 0 34px;
    }
    
}

@media (min-width: 1200px) {

    .pattern-image-text {
        margin: 110px 0;
    }

    .pattern-image-text__img {
        padding-bottom: 88px;
    }

    .pattern-image-text__pattern {
        height: 214px;
    }

    .pattern-image-text {
        padding: 0;
    }

    .pattern-image-text__img-left {
        padding: 0 54px 0 113px;
    }

    .pattern-image-text__img-right {
        padding: 0 113px 0 54px;
    }

    .flex-pattern-image-text--reverse {
        flex-direction: row-reverse;
    }

    .pattern-image-text__text {
        padding-top: 0;
    }

    .pattern-image-text--left .pattern-image-text__text {
        padding-left: 70px;
    }

    .pattern-image-text--right .pattern-image-text__text {
        padding-right: 70px;
    }
    
    
}