/* More in global css */
#hero video, 
#hero .splide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#hero video {
    overflow: hidden;
}

#hero .splide__toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    border: none;
    background-color: var(--color-rubine-red);
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    justify-content: center;
    transition: var(--transition);
    outline: var(--outline-width) solid transparent;
    outline-offset: var(--outline-offset);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

#hero .splide .splide__slide img {
    object-fit: cover;
    object-position: center;
}

#hero .large .splide .splide__slide img {
    height: var(--hero-height-large);
}

#hero .letterbox .splide .splide__slide img {
    height: var(--hero-height-letterbox);
}

#hero .splide__toggle:hover {
    filter: brightness(0.9);
    -webkit-filter: brightness(0.9);
}

#hero .splide__toggle:focus-visible {
    filter: brightness(0.9);
    -webkit-filter: brightness(0.9);
    outline-color: var(--color-focus);
}

#hero.overlay::before {
    content: "";
    background: var(--color-overlay-black);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

#hero .container-large {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#hero .hero-left {
    align-items: start;
}

#hero .hero-left .hero-content {
    text-align: unset;
    align-items: unset;
}