/* ==========================
   PORTAFOLIO VIDEO
========================== */

.portfolio-video{
    padding:50px 0;
    background:#000;
}

.container-portafolio{
    width:100%;
    max-width:1100px;
    margin:auto;
    padding:0 20px;
}

/* ==========================
   HEADER
========================== */

.portfolio-header{
    margin-bottom:50px;
}

.portfolio-header h2{
    color:#ffd000;
    font-size: clamp(52px, 8vw, 110px);
    font-weight:800;
    margin-bottom:15px;
}

/* ==========================
   FILTROS
========================== */

.video-filter{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    list-style:none;
    padding:0;
    margin:0;
}

.video-filter li{
    cursor:pointer;
    color:#8b8b8b;
    transition:.3s;
}

.video-filter li:hover,
.video-filter li.active{
    color:#ffffff;
}

/* ==========================
   GRID
========================== */

.video-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    align-items:start;
    transition:.35s;
}

.video-grid.fade{
    opacity:0;
}

/* ==========================
   ITEMS
========================== */

.video-item{
    overflow:hidden;
}

.video-item video{
    width:100%;
    display:block;
    border-radius:10px;
    background:#111;
}

/* ==========================
   HORIZONTALES
========================== */

.video-item.horizontal video{
    aspect-ratio:16/9;
    object-fit:cover;
}

/* ==========================
   VERTICALES
========================== */

.video-item.vertical video{
    aspect-ratio:9/16;
    object-fit:cover;
}

/* ==========================
   OPCIONALES
========================== */

/* ocupa 2 columnas */

.video-item.grande{
    grid-column:span 2;
}

/* ocupa fila completa */

.video-item.ancho{
    grid-column:1 / -1;
}

/* ==========================
   TABLET
========================== */

@media(max-width:991px){

    .video-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .video-item.vertical{
        max-width:none;
    }

}

/* ==========================
   MOVIL
========================== */

@media(max-width:576px){

    .portfolio-video{
        padding:80px 0;
    }

    .portfolio-header h2{
        font-size:38px;
    }

    .video-filter{
        gap:12px;
    }

    .video-grid{
        grid-template-columns:1fr;
    }

    .video-item.vertical{
        max-width:none;
    }

}