#toProduction{
    display: block;
    position: relative;
    overflow: auto;
}



.prod{
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 50%;
    font-size: var(--CenText);
    float: left;
    height: calc(50vh - ((5vw + var(--DrTitle) + 20px)/2));
    overflow: hidden;
    white-space: none;
}
.prod:nth-of-type(2){
    height: calc(100vh - (5vw + var(--DrTitle) + 20px));
}
.prod:nth-of-type(3){
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 100%);
}


.prod:nth-of-type(2) img{
 height: 100%;
 min-width: 100%;
 width: auto;
}


.prod img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 100%;
    height: auto;
}

.titleProd{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    border-top: 1px solid black;
    padding: .7vw 0 .5vw 0;
    width: 100%;
    color: black;
    text-align: center;
    transition: .2s;
    transform: translate(0, 100%);
}
.prod:hover .titleProd{
    transform: translate(0 , 0);

}


@media (orientation:portrait){

    #toProduction{
        display: block;
        position: relative;
        overflow: scroll;
    }

    .prod{
        width: 100%;
        height: 40dvh;
        display: block;
        float: unset;
    }

    .prod:nth-of-type(2){
        height:40dvh;
      
    }

    .prod:nth-of-type(3){
        margin-top:0;
        position: relative;
        transform: translate(0, 0);
        top:0;
        left:0;
        height:40dvh;
        overflow: hidden;
    }

    .prod img{
        min-width: 100%;
        min-height:100%;
        height: auto;
        width: auto;
        max-width: 150%;
    }
    


    

    .titleProd{
        padding: 1dvh 0;
        transform: translate(0,0%);
    }
    


}