.hero__video,
.hero__gradient {
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.hero__video {
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--animation-duration--slow)
}

.hero__video.canplaythrough {
    opacity: 1
}

.hero__gradient {
    --hsl: 33 27% 29%;
    opacity: .6
}

.hero.active .icon-button__animation-container {
    --play-state: var(--main-animation-play-state)
}

.hero__inner {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: var(--vh)
}

@media screen and (min-width: 1024px) {
    .hero__inner {
        grid-template-rows: 1fr
    }

    .hero__inner .hero__logos {
        display: none
    }
}

.hero__logos {
    display: grid;
    justify-content: center;
    margin-top: var(--spacer-xxs);
    padding-top: env(safe-area-inset-top)
}

.hero__main-layout {
    align-items: center;
    display: grid;
    gap: var(--spacer-s);
    grid-template-rows: 1fr auto;
    padding-left: 5vw;
    padding-right: 5vw
}

@media screen and (min-height: 500px) {
    .hero__main-layout {
        gap: 0
    }
}

@media screen and (min-width: 480px)and (orientation: landscape)and (max-height: 540px) {
    .hero__main-layout {
        gap: .5rem
    }
}

.hero__header {
    color: var(--color-sandstone);
    text-align: center
}

@media screen and (min-width: 480px)and (min-aspect-ratio: 1/1) {
    .hero__header {
        padding-top: var(--page-padding-vertical)
    }
}

.hero__heading {
    margin: 0 auto;
    text-transform: uppercase;
    word-break: break-word
}

.hero__title-prefix,
.hero__title {
    display: block
}

.hero__title-prefix {
    margin-bottom: .5rem
}

.hero__title-suffix {
    display: block;
    margin-top: 2rem
}

.hero__title span {
    font-size: 75%;
    font-weight: var(--type-weight-bold)
}

.hero__calligraphy {
    display: block;
    transform: rotate(4.24deg)
}

.hero__calligraphy svg {
    margin: -0.2em auto 0;
    width: 60%
}

@media screen and (min-width: 321px) {
    .hero__calligraphy svg {
        width: 5.6ch
    }
}

@media print {
    .hero__calligraphy svg {
        width: 7ch
    }
}

@media screen and (min-width: 321px) {
    .hero__title-prefix+.hero__calligraphy svg {
        width: 9ch
    }
}

.hero__bottom-bar {
    display: grid
}

@media screen and (min-width: 321px) {
    .hero__bottom-bar {
        align-items: center;
        grid-template-columns: 1fr 1fr;
        padding-bottom: var(--page-padding-vertical);
        padding-top: var(--spacer-xxs)
    }
}

@media screen and (min-width: 480px)and (orientation: landscape)and (max-height: 540px) {
    .hero__bottom-bar {
        padding-bottom: 1.25rem
    }
}

.hero__video-controls {
    border-radius: 20px;
    padding: .5rem
}

.hero__video-controls:not(.playing) .hero__video-controls__inner>*:last-child {
    display: none
}

.hero__video-controls.playing .hero__video-controls__inner>*:first-child {
    display: none
}

.hero__video-controls__inner {
    background-color: rgba(32, 33, 36, .5);
    border-radius: 24px;
    display: block
}

.hero__logos-desktop {
    display: none;
    justify-self: flex-end
}

@media screen and (min-width: 1024px) {
    .hero__logos-desktop {
        display: block
    }
}

@media print {
    .hero__inner {
        min-height: initial
    }

    .hero__video,
    .hero__gradient,
    .hero__scroll {
        display: none
    }
}