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

.prod1 .marg-text-pre{
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 80vw;
}

.prod1 .grid-livros-colunas{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 18px;
    margin-left: auto;
    margin-right: auto;
}

.prod1 .grid-livros-item{
    display: grid;
    position: relative;
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 8px;
    grid-row-gap: 4px;
    padding: 0;
    align-items: center;
}
.prod1 .grid-livros-item .text{
    margin: auto;
    width: 80vw;
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 1024px){
    .wrapper {
        align-content: center;
        grid-template-columns: repeat(12, 113.83px);
        grid-template-rows:518px 54px auto 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"
        "produ1 produ1 produ1 produ1 produ1 produ1 produ1 produ1 produ1 produ1 produ1 produ1"
        "footer footer footer footer footer footer footer footer footer footer footer footer";
        grid-gap: unset;
        justify-content: center;
        margin: auto;
    }

    .prod1{
        grid-area: produ1;
        display: grid;
        align-items: flex-start;
        grid-template-rows: 210px 30px auto; 
        /* grid-template-rows: 190px 30px 120px 30px 120px 30px 120px 30px 120px;  */
    }
    

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

    .prod1 .marg-text-pre{
        white-space: pre;
        margin-right:140px;
        width: unset;
    }

    .prod1 .grid-livros-colunas{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-gap: 18px;
        margin-left: 140px;
        margin-right: 140px;
    }

    .prod1 .grid-livros-item .text{
        margin: auto;
        width: 100%;
    }

    
}

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

}