* {
    box-sizing:border-box;
    padding:0;
    margin:0;
}

main {
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    top:85px;
    background-color:#eae3ba;


    #itens {
        display:grid;
        grid-template-columns:50% 50%;
        justify-content:center;
        width:100vw;
        position:relative;
        margin-bottom:5%;

        .info_item {
            display:flex;
            flex-direction:column;
            width:80%;
            aspect-ratio:16/23;
            margin:auto;
            margin-top:8%;
            margin-bottom:5%;
            box-shadow:1px 1px 3px #96832e;
            cursor:pointer;
            background-color:#e6ddae;

            #img {
                height:40%;

                #imagem_dinâmica {

                    source {
                        height:100%;
                        width:100%;
                    }

                    img {
                        height:100%;
                        width:100%;
                        background-size:contain;
                    }
                }

                #oferta {

                }
            }

            #container_preço {
                display:flex;
                flex-direction:column;
                align-items:center;
                height:60%;
                padding-top:15px;

                #marca_peça {
                    padding:5px;
                    color:#000000;
                    font-weight:bold;
                }

                #nome_peça {
                    width:100%;
                    padding:10px;
                    color:#858383;
                    font-size:20px;
                    text-align:center;
                    text-overflow:ellipsis;
                    overflow:hidden;
                    white-space:nowrap;

                }

                #_preço {
                    display:flex;
                    padding:7px;
                    
                    #sem_desconto {
                        margin-right:10px;
                        color:#000000;
                        font-weight:bold;
                    } 

                    #com_desconto {
                        color:#b10303;
                        font-weight:bold;
                    }
                }
            }
        }

    }

    #destaques {
        border:1px solid green;
        width:100vw;
        position:relative;

        h2 {
            border:1px solid orange;
            display:flex;
            align-items:center;
            height:90px;
            font-size:40px;
            padding-left:7%;
        }

        #itens_destaques {
            border:1px solid red;

            #itens_controle {
                height:45vw;
                max-height:350px;
                width:100%;
                position:absolute;
                margin:0.5%;

                #icone_anterior {
                    border:1px solid #ffffff;
                    border-radius:50px;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    height:50px;
                    width:50px;
                    position:absolute;
                    top:45%;
                    z-index:2;
                    margin-left:20px;
                    cursor:pointer;
                    color:#ffffff;
                    background-color:#ccc9c944;
                }

                #icone_avançar {
                    border:1px solid #ffffff;
                    border-radius:50px;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    height:50px;
                    width:50px;
                    position:absolute;
                    top:45%;
                    justify-self:end;
                    z-index:2;
                    margin-right:25px;
                    transform:rotate(180deg);
                    cursor:pointer;
                    color:#ffffff;
                    background-color:#ccc9c944;
                }
            }

            #container_destaques {
                border:1px solid red;
                width:100%;
                position:relative;
                white-space:nowrap;
                overflow:hidden;

                .img_destaques {
                    border:1px solid #000000;
                    display:inline-block;
                    vertical-align:text-top;
                    max-width:350px;
                    padding:0.5%;

                    #imagem {
                        border:1px solid yellow;
                        border-radius:10px;
                        display:block;
                        height:45vw;
                        max-height:350px;
                        width:39vw;
                        max-width:330px;
                        margin:auto;
                        background-color:#000000;
                    }

                    #nome_d {
                        border:1px solid blue;
                    }

                    #valor_d {
                        border:1px solid yellow;
                        height:20px;
                    }

                    #contato_d {
                        display:none;
                        justify-content:center;

                        a {
                            margin:5px;
                            text-decoration:none;
                            font-size:clamp(19px, 2.5vw, 25px);
                        }
                    }
                }
            }
        }
    }

    #modal {
        display:flex;
        justify-content:center;
        align-items:center;
        height:0;
        width:0;
        position:fixed;
        top:12vh;
        z-index:4;
        overflow:scroll;
        transition:0.1s;
        background-color:#00000056;

        #modal_item {
            border-radius:20px;
            width:55%;
            max-width:350px;
            aspect-ratio:16/23;
            min-height:350px;
            box-shadow:1px 1px 5px #000000;
            background-color:#ffffff;
            

            #container_img {
                border:1px solid red;
                border-top-left-radius:20px;
                border-top-right-radius:20px;
                height:50%;
                width:100%;

                img {
                    border-top-left-radius:20px;
                    border-top-right-radius:20px;
                    height:100%;
                    width:100%;

                }
            }

            #container_p {
                display:flex;
                flex-direction:column;
                align-items:center;
                row-gap:10px;
                height:20%;
                padding-top:5%;
                margin-bottom:5%;

                #marca_p {
                    color:#000000;
                    font-weight:bold;
                }

                #nome_p {
                    color:#858383;
                    font-weight:bold;
                }

                #preço_p {
                    color:#b10303;
                    font-weight:bold;
                }
            }

            #container_contatar {
                display:flex;
                flex-direction:column;
                align-items:center;
                height:30%;
                padding:5%;

                #contatar_texto {
                    font-weight:bold;
                    margin-bottom:5%;
                }

                #contatar_links {

                    #whatsapp {

                        i {
                            font-size:30px;
                        }
                    }

                    #instagram {

                        i {
                            font-size:30px;
                        }
                    }
                }
            }
        }
    }
}

@media (min-width:700px) {
    main {
        #itens {
            display:grid;
            grid-template-columns:30% 30% 30%;
            justify-content:center;
            column-gap:20px;
            width:100vw;
            position:relative;
            margin-bottom:5%;

            #info_item {
                display:flex;
                flex-direction:column;
                width:100%;
                aspect-ratio:16/23;
                margin-top:8%;
                margin-bottom:5%;
                box-shadow:1px 1px 3px #96832e;
                cursor:pointer;
                background-color:#e6ddae;
            }
        }

        /*#destaques {
            border:1px solid #0000ff;
            display:flex;
            flex-direction:column;
            width:100%;
            aspect-ratio:16/12;
            max-height:600px;
            overflow-x:scroll;
            margin-bottom:3%;

            #container_destaques {
                border:1px solid #ff0000;
                width:100%;
                height:100%;
                white-space:nowrap;
                overflow:hidden;

                /*.img_destaques {
                    border:1px solid #000000;
                    display:inline-block;
                    vertical-align:text-top;
                    max-width:350px;
                    padding:0.5%;
                }
            }
        }*/
    }
}