.hero-section {
    position: relative;
    padding: 0px;
    color: white;
    height: clamp( 400px, 100vh, 1900px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text--secondary);
    margin: auto;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

.hero-content p {
    font-size: var(--big-p);
    max-width: 50ch;
}

.hero-title {
    max-width: 1000px;
}

.hero-annotation {
    padding: var(--sp2) var(--sp5);
    border-radius: 20px;
    border: var(--border-s-alt);
    backdrop-filter: brightness(80%) blur(10px);
    font-size: var(--p);
}

.hero-buttons {
    display: grid;
    width: 100%;
    max-width: 700px;
    margin: auto;
    align-items: center;
    justify-content: center;
    grid-template-columns: 300px 300px;
    gap: var(--sp2);
}

.rezultati-button {
    font-size: var(--big-p);
}

.hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.hero-bg--content {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg--video {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    object-fit: cover;
    filter: grayscale(0%) brightness(80%) blur(2px);
}

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


@media (max-width: 900px) {
    .hero-section {
        height: calc(100vh - ( clamp(30px, 10vw, 60px) + ( 2 * var(--sp6)) ));
    }

    .hero-content {
        margin: auto;
    }

    .hero-annotation {
        padding: var(--sp2) var(--sp4);
        font-size: var(--label);
    }

    .hero-content p {
        font-size: var(--p);
    }

    .hero-buttons {
        max-width: 270px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;

    }


}