.projects-banner{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    column-gap: 50px;
}
.projects-banner .imgLeft{
    grid-column: 1 / 4;
    order: 1;
}
.projects-banner .textCenter{
    grid-column: 4 / 10;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    order: 2;
}
.projects-banner .imgRight{
    grid-column: 10 / 13;
    order: 3;
}
.projects-banner .textCenter h5{
    text-transform: uppercase;
    font-weight: bold;
    max-width: 50%;
}

.projects-banner .textCenter .btn{
    display: flex;
    margin-top: auto;
}

.projects-banner .imgLeft img, 
.projects-banner .imgRight img{
    max-width:100%;
    height: 60vh;
    object-fit: cover;
}

.projects-banner .imgLeft img{
    border-radius: 0 20px 20px 0;
}

.projects-banner .imgRight img{
    border-radius: 20px 0 0 20px;
}

/* tablette */
@media screen and (max-width: 1024px)  {
    .projects-banner{
        column-gap: 15px;
    }
    .projects-banner .imgLeft{
        grid-column: 1/7;
        padding-left: 15px;
        order: 2;
    }
    .projects-banner .textCenter{
        grid-column: 1/13;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 15px;
        margin-right: 15px;
        order: 1;
    }
    .projects-banner .imgRight{
        grid-column: 7/13;
        padding-right: 15px;
        order: 3;
    }

    .projects-banner .imgLeft img, 
    .projects-banner .imgRight img{
        border-radius: 20px;
    }

    .projects-banner .textCenter h5{
        max-width: 100%;
    }
}

/* mobile */
@media screen and (max-width: 769px){
    .projects-banner .imgLeft{
        grid-column: 1/13;
        padding-right: 15px;
        padding-bottom: 15px;
    }
    .projects-banner .imgRight{
        grid-column: 1/13;
        padding-left: 15px;
    }
}