@import "src/scss/core/mixin";
.full-width-image {
    margin-bottom: toRem(64);
    @include tablet {
        margin-bottom: toRem(40);
    }
    @include mobile {
        &.mb-big {
            margin-bottom: toRem(112);
        }
        &.no-short-line {
            .text-block-wrapper .text-block.short-line {
                max-width: 100%;
            }
        }
    }
    .mpwbpk-image.full-width {
        >a {
            display: block;
            position: relative;
            overflow: hidden;
        }
        img {
            display: flex;
            will-change: transform;
            transition: transform .3s cubic-bezier(.23, 1, .32, 1);
            width: 100%;
        }
    }
    .text-block-wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        &.bottom {
            margin-top: toRem(35);
        }
        @include mobile {
            flex-direction: column;
        }
        .text-block {
            margin-bottom: toRem(14);
            width: 50%;
            transition: .3s ease-in-out all;
            p {
                @include mobile {
                    margin-bottom: 0;
                }
            }
            @include mobile {
                width: 100%;
                &.short-line {
                    max-width: toRem(241);
                }
            }
        }
        h3 {
            @include normalHeading;
            @include mobile {
                font-size: toRem(14);
            }
        }
        a.cta {
            @include linkWithArrow();
            &.hover {
                color: var(--color-text-hover);
                &:before {
                    background-position: center left toRem(5);
                    filter: invert(60%);
                }
            }
        }
    }
    .caption {
        display: flex;
        justify-content: flex-end;
        p {
            color: var(--color-caption);
            font-size: toRem(12);
            font-weight: 400;
            line-height: toRem(15.6);
            margin-top: toRem(12);
            width: 50%;
        }
    }
    &.hover {
        .mpwbpk-image.full-width>a {
            img {
                transform: scale(1.05);
            }
        }
        .text-block-wrapper .text-block {
            color: var(--color-text-hover);
        }
    }
}

.media {
    video {
        width: 100%;
    }
}