/*=========================================
            WORK SECTION
=========================================*/

.work{

    background:#0b0b0b;

    position:relative;

    overflow:hidden;

}

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

.work-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    grid-template-rows:420px 420px;

    gap:28px;

}

/*=========================================
        LARGE PROJECT
=========================================*/

.project-card.large{

    grid-row:span 2;

}

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

.project-card{

    position:relative;

    overflow:hidden;

    cursor:pointer;

    background:#f4f4f4;

}

.project-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s cubic-bezier(.22,.61,.36,1);

}

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

.overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:flex-start;

    padding:40px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

    transition:.45s;

}

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

.overlay h3{

    color:#8bb9e0;

    font-family:'Anton',sans-serif;

    font-size:2rem;

    letter-spacing:2px;

    transform:translateY(25px);

    opacity:0;

    transition:.45s;

}

/*=========================================
        RED BAR
=========================================*/

.overlay::before{

    content:"";

    position:absolute;

    left:40px;

    bottom:26px;

    width:0;

    height:4px;

    background:var(--red);

    transition:.45s;

}

/*=========================================
        IMAGE HOVER
=========================================*/

.project-card:hover img{

    transform:scale(1.08);

}

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

.project-card:hover .overlay{

    background:linear-gradient(
        transparent,
        #d3968c
    );

}

.project-card:hover h3{

    transform:translateY(0);

    opacity:1;

}

.project-card:hover .overlay::before{

    width:100px;

}

/*=========================================
        PROJECT NUMBER
=========================================*/

.project-card::after{

    content:"01";

    position:absolute;

    top:35px;

    right:35px;

    color:#fff;

    font-size:1rem;

    font-weight:700;

    opacity:.85;

    transition:.35s;

}

.project-card:nth-child(2)::after{

    content:"02";

}

.project-card:nth-child(3)::after{

    content:"03";

}

.project-card:hover::after{

    transform:translateY(-5px);

}

/*=========================================
        SECTION DECORATION
=========================================*/

.work::before{

    content:"";

    position:absolute;

    left:-180px;

    top:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(217,23,23,.04);

}

/*=========================================
        BUTTON AREA
=========================================*/

.work-footer{

    display:flex;

    justify-content:center;

    margin-top:70px;

}

/*=========================================
        VIEW ALL BUTTON
=========================================*/

.view-work{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border:2px solid var(--black);

    font-weight:700;

    letter-spacing:2px;

    transition:.35s;

}

.view-work:hover{

    background:var(--black);

    color:#fff;

}

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

@media(max-width:1100px){

    .work-grid{

        grid-template-columns:1fr;

        grid-template-rows:auto;

    }

    .project-card.large{

        grid-row:auto;

    }

    .project-card{

        height:500px;

    }

}

/*=========================================
        MOBILE
=========================================*/

@media(max-width:768px){

    .project-card{

        height:360px;

    }

    .overlay{

        padding:25px;

    }

    .overlay h3{

        font-size:1.5rem;

    }

    .project-card::after{

        top:20px;

        right:20px;

    }

}

/*=========================================
        SMALL MOBILE
=========================================*/

@media(max-width:480px){

    .project-card{

        height:280px;

    }

    .overlay h3{

        font-size:1.2rem;

    }

}