#hero {
    position: relative;
    overflow: hidden;
}

#hero:before {
    content: "";
    background: linear-gradient(90deg, rgba(11, 11, 11, 0.8) 0%, rgba(11, 11, 11, 0.8) 0%, transparent 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
	pointer-events: none;
}

#hero .splide__list > .splide__slide {
	width: 100%;
}

#hero .container.large-hero {
    min-height: 100vh;
    position: relative;
    z-index: 99;
	width: 100%;
}

#hero .container.small-hero {
    position: relative;
    z-index: 99;
	width: 100%;
}

#hero .container.small-hero h1 {
    font-size: clamp(3rem, 10vw, 4rem) !important;
}

#hero .container > div {
    max-width: 45rem;
}

#hero .hero-content {
    position: relative;
    z-index: 9;
    max-width: 40rem;
}

#hero .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


section#hero + section:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    display: block;
    height: 10rem;
    pointer-events: unset;
    z-index: 9 !important;
}

section#hero + section.bg-off-black:before {
    background: linear-gradient(0deg, var(--color-off-black) 20%, transparent 100%) !important;
}

section#hero + section.bg-light-grey:before {
    background: linear-gradient(0deg, var(--color-light-grey) 20%, transparent 100%) !important;
}

section#hero + section.bg-dark-grey:before {
    background: linear-gradient(0deg, var(--color-dark-grey) 20%, transparent 100%) !important;
}

section#hero + section.bg-metal:before {
    background: linear-gradient(0deg, var(--color-metal) 20%, transparent 100%) !important;
}

section#hero + section.bg-white:before {
    background: linear-gradient(0deg, var(--color-white) 20%, transparent 100%) !important;
}

section#hero + section.bg-black:before {
    background: linear-gradient(0deg, var(--color-black) 20%, transparent 100%) !important;
}