/*=========================================
        PORTFOLIO MODAL
==========================================*/

#portfolioModal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(18px);

    opacity:0;

    visibility:hidden;

    transition:.45s;

    z-index:9000;

}

#portfolioModal.active{

    opacity:1;

    visibility:visible;

}

/*=========================================
        CONTAINER
==========================================*/

.portfolio-container{

    width:min(1550px,94%);

    height:92vh;

    background:#080808;

    border-radius:26px;

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

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

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

.portfolio-header{

    height:100px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 45px;

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

}

.portfolio-subtitle{

    color:#ff2d2d;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:12px;

}

.portfolio-header h2{

    color:#fff;

    margin-top:8px;

    font-size:38px;

}

#portfolioClose{

    width:58px;

    height:58px;

    border-radius:50%;

    border:none;

    background:#171717;

    color:#fff;

    font-size:32px;

    cursor:pointer;

    transition:.35s;

}

#portfolioClose:hover{

    background:#ff2d2d;

    transform:rotate(90deg);

}

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

#portfolioGrid{

    flex:1;

    overflow:auto;

    padding:40px;

    display:grid;

    grid-template-columns:1fr 1fr 1fr !important;

    gap:24px;

}

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

.portfolio-item{

    position:relative;

    aspect-ratio:3/4;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

    background:#111;

}

.portfolio-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:1s;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

.portfolio-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,

    rgba(0,0,0,.4),

    transparent);

    opacity:0;

    transition:.35s;

}

.portfolio-item:hover::after{

    opacity:1;

}

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

@media(max-width:1100px){

#portfolioGrid{

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

}

}

@media(max-width:700px){

#portfolioGrid{

grid-template-columns:1fr;

}

}

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

/*------------------------------
        Laptop / Tablet
------------------------------*/
@media (max-width:1199px){

    .portfolio-container{
        width:96%;
        height:90vh;
    }

    .portfolio-header{
        padding:20px 30px;
    }

    .portfolio-header h2{
        font-size:34px;
        line-height:1;
    }

    #portfolioGrid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        padding:25px;
    }

    .portfolio-item{
        border-radius:18px;
    }

}

/*------------------------------
        Mobile
------------------------------*/
@media (max-width:767px){

    #portfolioModal{
        padding:15px;
    }

    .portfolio-container{
        width:100%;
        height:92vh;
        border-radius:20px;
    }

    .portfolio-header{
        padding:18px 18px 15px;
        align-items:flex-start;
    }

    .portfolio-header h2{
        font-size:42px;
        line-height:.9;
        max-width:220px;
    }

    #portfolioGrid{
    grid-template-columns:1fr 1fr !important;
    gap:18px;
    padding:20px;
}

    .portfolio-item{
        width:100%;
        aspect-ratio:3/4;
        border-radius:16px;
        overflow:hidden;
    }

    .portfolio-item img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    #portfolioClose{
        width:52px;
        height:52px;
        font-size:28px;
    }

}

/*------------------------------
        Small Phones
------------------------------*/
@media (max-width:480px){

    .portfolio-header h2{
        font-size:32px;
        max-width:180px;
    }

    .portfolio-subtitle{
        font-size:11px;
        letter-spacing:3px;
    }

    #portfolioGrid{
    grid-template-columns:1fr 1fr !important;
    gap:18px;
    padding:20px;
}

}