#section-1{
    width: 100%;
    height: 100vh;
    
}

.section-1-card{
    width: 100%;
    height: calc((100vh - 120px)/3);
}

.section-1-card:nth-child(2){
    margin: 30px 0;
}

.section-1-card .img{
    width: 30%;
    height: 100%;
    background-size: contain;
    background-position: center;
    overflow: hidden;
}

.section-1-card .img img{
    transform: scale(0.6,0.6);
    transition: all 1s ease-in-out;
}

.section-1-card .img img:hover{
    transform: scale(1.0,1.0);
}

.section-1-card .text-mask{
    background-color: #DED9C3;
    width: 70%;
    margin: 0 0 0 30px;

}

.section-1-card:nth-child(2) .img{
    order: 1;
}


.section-1-card:nth-child(2) .text-mask{
    margin: 0 30px 0 0 ;
}

@media ( max-width:1280px) {

    #section-1 .section-container{
        display: flex;
        flex-wrap: wrap;
    }

    .section-1-card{
        height: calc((100vh - 90px)/2);
        
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction:column;
    }

    .section-1-card:nth-child(2){
        margin: 30px 0 0 0;
        width: 50%;
    }

    .section-1-card:nth-child(3){
        margin: 30px 0 0 0;
        width: 50%;
    }

    .section-1-card:nth-child(2) .img{
        order: unset;
    }

    .section-1-card .text-mask{
        width: 50%;
        position: absolute;
        margin: unset;
        bottom: -250px;
        left: 25%;
        height: 300px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .section-1-card:nth-child(2) .text-mask{
        width: 100%;
        left: 0;
    }

    .section-1-card:nth-child(3) .text-mask{
        width: 100%;
        left: 0;
    }

    .section-1-card .text-mask h1{
        text-align: center;
        color: white;
    }

    .section-1-card .text-mask li{
        color: bisque;
    }

    .section-1-card .text-mask p{
        color: bisque;
    }

    .section-1-card .text-mask h6{
        color: bisque;
    }

    .section-1-card .img{
        width: 100%;
    }

    .section-1-card .text-mask:hover{
        bottom: 0;
    }
}
    
@media ( max-width:768px) {
    #section-1{
        height: unset;
    }
    
    .section-1-card{
        height: unset;
    }

    .section-1-card:nth-child(2){
        width: 100%;
        margin:30px 0;
    }

    .section-1-card:nth-child(3){
        width: 100%;
        margin:unset;
    }

    .section-1-card .text-mask{
        width: 100%;
        bottom: -250px;
        left: unset;
    }

    .section-1-card .text-mask h1{
        text-align: left;
    }

    .section-1-card .text-mask li{
        color: bisque;
    }

    .section-1-card .img{
        width: 100%;
    }
}