@import "src/scss/core/mixin";
.hero-block {
    margin-bottom: toRem(50);
    position: relative;
    overflow: hidden;
    @include tablet {
        margin-bottom: toRem(88);
    }
    @include mobile {
        margin-bottom: toRem(93);
        &.mb-big {
            margin-bottom: toRem(93);
        }
        &.mb-nor {
            margin-bottom: toRem(40);
        }
    }
    .marquee {
        height: toRem(55);
        line-height: toRem(55);
        @include large {
            max-width: toRem(700);
        }
        @include desktop {
            max-width: toRem(280);
        }
        @include mobile {
            height: toRem(35);
            line-height: toRem(35);
            max-width: toRem(250);
        }
    }
    .js-marquee {
        display: flex;
        position: relative;
        div {
            display: flex;
            padding: 0 1rem 0 0;
        }
    }
    .media {
        display: flex;
        position: relative;
        img,
        video {
            width: 100%;
        }
        .image-wrapper {
            opacity: .8;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            mix-blend-mode: multiply;
        }
    }
    .texts-above-hero {
        display: flex;
        justify-content: space-between;
        margin-bottom: toRem(25);
        @include mobile {
            flex-direction: column;
        }
        .text-above-hero {
            width: 50%;
            &:first-of-type {
                max-width: toRem(320);
            }
            a.cta {
                @include linkWithArrow();
            }
            @include mobile {
                width: 100%;
                &:first-of-type {
                    margin-bottom: 1.5rem;
                    max-width: 100%;
                }
            }
        }
        &.full-width .text-above-hero {
            max-width: 100%;
        }
    }
    &.no-short-line {
        .text-above-hero {
            &:first-of-type {
                max-width: toRem(434);
            }
        }
    }
    .media-caption {
        display: flex;
        justify-content: flex-end;
        margin-top: toRem(18);
        p.caption {
            color: var(--color-caption);
            font-size: toRem(12);
            font-weight: 400;
            line-height: toRem(15.6);
            width: 50%;
            span {
                display: flex;
                max-width: toRem(284);
                @include desktop {
                    max-width: 100%;
                }
            }
        }
    }
    p.date {
        position: absolute;
        right: 0;
        top: toRem(26);
        @include mobile {
            display: none;
        }
    }
    &.text-above-no-margin {
        @include mobile {
            .texts-above-hero {
                margin-bottom: toRem(8);
                .text-above-hero {
                    margin-bottom: 0;
                }
            }
        }
    }
}

// YouTube as a background video
.video {
    &__external {
        //min-height: toRem(604);
        overflow: hidden;
        width: 100%;
        iframe {
            aspect-ratio: 16 / 9;
            margin-top: -3px;
            margin-bottom: -4px;
            width: 100%;
        }
        &[data-show-controls]:not([data-show-controls="yes"]) {
            pointer-events: none;
        }
    }
}

.ytp-watermark {
    display: none !important;
}