/*for small devices*/
.prod{
    display: grid;
}
.prod .marg-title{
    margin-left: 0;
    margin-top: 0;
    text-align: center;
}
.prod .marg-title-30{
    margin-top: 30px;
}
.prod .marg-text{
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px
}

.prod .marg-text-pre{
    
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px){
    .wrapper {
        align-content: center;
        grid-template-columns: repeat(12, 113.83px);
        grid-template-rows:518px 54px 1090px 300px;
        grid-template-areas:
        "header header header header header header header header header header header header"
        "menu menu menu menu menu menu menu menu menu menu menu menu"
        "produ produ produ produ produ produ produ produ produ produ produ produ"
        "footer footer footer footer footer footer footer footer footer footer footer footer";
        grid-gap: unset;
        justify-content: center;
        margin: auto;
    }

    .prod{
        grid-area: produ;
        display: grid;
        align-items: flex-start;
        grid-template-rows: 190px 30px 180px 30px 60px 30px 240px 30px 120px; 
    }

    .prod .marg-title{
        margin-left: 140px;
        margin-top: 80px;
        text-align: left;
    }
    .prod .marg-title-30{
        margin-top: 0;
        margin-left: 140px;
    }
    .prod .marg-text{
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px
    }
    
    
    .prod a{
        text-decoration: none;
    }

    .prod .marg-text-pre{
        white-space: pre;
        margin-right:140px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .wrapper {
        align-content: center;
        grid-template-columns: repeat(12, 100px);
    }		

}