@import "src/scss/core/mixin";
.two-cols-image {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: toRem(67);
    transition: .3s ease-in-out all;
    @include mobile {
        flex-direction: column;
        gap: toRem(11);
        margin-bottom: toRem(88);
    }
    &.display-2-cols-in-mobile {
        @include mobile {
            flex-direction: row;
            margin-bottom: toRem(88);
            &.mb-big {
                margin-bottom: toRem(88);
            }
            &.mb-nor {
                margin-bottom: toRem(40);
            }
        }
    }
    .image-block {
        margin-bottom: toRem(14);
        width: calc(50% - .5rem);
        transition: .3s ease-in-out all;
        @include mobile {
            width: 100%;
        }
        img {
            display: flex;
            width: 100%
        }
        h3 {
            @include normalHeading;
            @include mobile {
                font-size: toRem(14);
            }
        }
        &.hover {
            .text-block {
                color: var(--color-text-hover);
            }
            a.img-wrapper {
                img {
                    transform: scale(1.05);
                }
            }
        }
        video {
            max-width: 100%;
        }
        .text-block {
            margin-top: toRem(27);
            max-width: 80%;
            transition: .3s ease-in-out all;
            &.above {
                margin-bottom: toRem(13);
                margin-top: 0;
            }
            &.caption {
                color: var(--color-caption);
                font-size: toRem(12);
                font-weight: 400;
                line-height: toRem(15.6);
                margin-top: toRem(10);
            }
            @include mobile {
                max-width: 100%
            }
            p {
                @include mobile {
                    word-break: break-all;
                }
            }
        }
    }
    a.cta {
        @include linkWithArrow();
        @include lineClaim(2);
        min-width: auto;
        &.hover {
            color: var(--color-text-hover);
            &:before {
                background-position: center left toRem(5);
                filter: invert(60%);
            }
        }
    }
    a.img-wrapper {
        display: block;
        position: relative;
        overflow: hidden;
        img {
            display: flex;
            will-change: transform;
            transition: transform .4s cubic-bezier(.23, 1, .32, 1);
            width: 100%;
        }
    }
    &.no-short-line {
        .text-block {
            max-width: 100%;
        }
    }
    &.equal-height {
        a.img-wrapper {
            min-height: 350px;
            max-height: 350px;
            img,
            video {
                height: 350px;
                @include positionImage();
            }
            @include mobile {
                min-height: 126px;
                max-height: 126px;
                img,
                video {
                    height: 126px;
                }
            }
        }
        img {
            min-height: 350px;
            max-height: 350px;
            @include positionImage();
            @include mobile {
                min-height: 126px;
                max-height: 126px;
                img {
                    height: 126px;
                }
            }
        }
    }
}