/*=====================================
FEATURED WORK
======================================*/

.portfolio{

    padding:120px 0;

    background:var(--bg);

}

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:70px;

}


/*=====================================
CARD
======================================*/

.portfolio-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.08);

    background:#111;

    transition:.35s;

    cursor:pointer;

}

.portfolio-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 25px 60px rgba(255,79,135,.25);

}


.portfolio-card video{

    width:100%;

    aspect-ratio:9/16;

    object-fit:cover;

    border-radius:20px;

    display:block;

    background:#000;

}
.portfolio-card:hover video{

    transform:scale(1.06);

}


/*=====================================
OVERLAY
======================================*/

.portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    background:linear-gradient(to top,
    rgba(0,0,0,.92),
    rgba(0,0,0,.35),
    transparent);

    opacity:0;

    transition:.35s;

}

.portfolio-card:hover .portfolio-overlay{

    opacity:1;

}


/*=====================================
PLAY BUTTON
======================================*/

.play-btn{

    width:80px;

    height:80px;

    border-radius:50%;

    background:rgba(255,79,135,.90);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    margin:auto;

    transition:.35s;

}

.portfolio-card:hover .play-btn{

    transform:scale(1.15);

}


/*=====================================
TITLE
======================================*/

.portfolio-overlay h3{

    width:100%;

    text-align:left;

    color:#fff;

    font-size:24px;

    font-weight:700;

}


/*=====================================
RESPONSIVE
======================================*/

@media(max-width:992px){

    .portfolio-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .portfolio-grid{

        grid-template-columns:1fr;

    }

}