/*--x-- --x-- ~~ △ ~~ --x-- --x--
//  Gradient Containers
--x-- --x-- ~~ ▽ ~~ --x-- --x--*/

.gradient-white{
    background-image: linear-gradient(180deg, rgba(var(--white-L), .2) 0, rgba(var(--black-L), 0));
}

.gradient-purple{
    background-image: linear-gradient(180deg, rgba(var(--purple-L), .2) 0, rgba(var(--black-L), 0));
}

.gradient-container {
    background-repeat: no-repeat;
    background-size: 100% 30rem;
    position: relative;
}

/* Section Grid Lines */
.section-grid {
    position: relative;
}

.section-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 0px, 
        rgba(255, 255, 255, 0.1) 1px, 
        transparent 1px, 
        transparent 100%);
    background-size: calc(100% / var(--main-grid-columns)) 100%;
    pointer-events: none;
    z-index: -10;
}

.section-divider {
    position: relative;
    height: 1px;
    margin: 0px;
    overflow: hidden;
}

.section-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}


/*--x-- --x-- ~~ △ ~~ --x-- --x--
//  Reactivity
--x-- --x-- ~~ ▽ ~~ --x-- --x--*/

@media (max-width: 768px) {
    :root {
        --main-grid-columns: 3;
    }

    /* ------ Main Hero Containter ------ */

    .main-hero{
        height:       calc(100vh - 550px);
        min-height:   550px;
    }

    .video-bg-blur {
        display: none;
    }
    .downwards-arrow{
        display: none;
    }

    /* ------ News Containter ------ */


    .left-news-container,
    .right-news-container {
        position: relative;
        display: flex; /* Facilita o alinhamento */
        grid-column: span 3;
        flex-direction: column;
        gap: 1rem; /* Espaçamento interno */
        overflow: hidden;
    }
    
    .big-news-container {
        grid-column: span 3;
        height: clamp(300px, 40vh, 600px);
    }

    .small-news-container {
        width: 100%;
        height: clamp(250px, 35vh, 400px);
    }
}