#uvod.hero-intro {
    --hero-mask-opacity: 0;

    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    min-height: 760px;
    margin: 0;
    padding: calc(var(--vz-nav-h, 78px) + 32px) 0 64px;
    overflow: hidden;
    background: var(--vz-papir, #f7f4ee);
    color: var(--vz-inkoust, #22365c);
}

.hero-intro::before,
.hero-intro::after {
    content: none;
}

.hero-intro .hero-intro-stage {
    box-sizing: border-box;
    width: min(1180px, calc(100% - 64px));
    max-width: 1180px;
    min-height: 640px;
    margin: 0 auto;
}

.hero-intro .hero-intro-film {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    visibility: hidden;
    background: var(--vz-papir, #f7f4ee);
    pointer-events: none;
    opacity: 1;
}

.hero-intro.is-intro .hero-intro-film {
    visibility: visible;
}

.hero-intro .hero-intro-video {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    object-position: center;
}

.hero-intro .hero-intro-mask {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    background: var(--vz-papir, #f7f4ee);
    opacity: var(--hero-mask-opacity, 0);
    pointer-events: none;
}

@media (max-width: 850px) {
    #uvod.hero-intro {
        min-height: 0;
        padding: calc(var(--vz-nav-h, 78px) + 28px) 0 64px;
    }

    .hero-intro .hero-intro-stage {
        width: calc(100% - 40px);
        min-height: 0;
    }
}

@media (max-width: 520px) {
    #uvod.hero-intro {
        padding: calc(var(--vz-nav-h, 78px) + 24px) 0 48px;
    }

    .hero-intro .hero-intro-stage {
        width: calc(100% - 28px);
    }
}