.hero {
    color: white;
}

.hero-title {
    bottom: 100px;
    padding: 30px;
}

.hero p {
    color: white;
    font-family: Montserrat;
    font-size: 1rem;
    font-style: normal;
    font-weight: 800;
    line-height: 122.644%;
}

.hero h1 {
    color: white;
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
}

@media (min-width: 1024px) {
    .hero h1 {
        font-size: 3.125rem;
        width: 60%;
    }

    .hero p {
        font-size: 1.5rem;
    }
}

.video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    z-index: 2;
    background-image: radial-gradient(circle, #17141100 20%, #000000ba);
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.video-overlay.light {
    opacity: .46;
    background-image: radial-gradient(circle, #17141100 73%, #000000ba);
}