@media(min-width: 320px) and (max-width: 720px) {

    body{
        overflow-x: hidden;
    }

    /* parte de header */
     .active {
        padding: 1rem;
        font-size: 1rem;
    }

    .logo img {
        display: none;
    }

    header {
        display: block;
    }

    .pesquisar ion-icon {
        font-size: 2rem;
    }

    .pesquisar {
        margin-bottom: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    header .login {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    button {
        font-size: 1rem;
        width: 4rem;
    }

    #btn-login {
        width: 4.5rem;
    }

    /* pagina principal */
    .pg-principal {
        margin-bottom: 10rem;
    }

    .carrosel-content {
        gap: 1rem;
    }

    .carrosel-content .img img{
        width: 3rem;
    }

    @keyframes carrosel {

        0% {
            transform: translateX(0%);
        }
    
        100% {
            transform: translateX(0%);
        }
    }

    /* parte da pagina de promoções */

    .pg-promocao {
        margin-bottom: 10rem;
    }

    .card1{
        width: 30rem;
    }

    .card2{
        width: 20rem;
        margin-bottom: 4rem;
    }

    .card3{
        width: 20rem;
    }

    .card1 img {
        width: 30rem;
    }

    .card2 img {
        width: 20rem;
    }

    .card3 img {
        width: 20rem;
    }

    .parte-de-baixo h1 {
        width: 20rem;
        margin: 0;
    }

    .card-de-cima {
        display: block;
    }

    .parte-de-baixo {
        display: block;
    }

    .carousel-images {
        width: 15rem;
    }

    .carousel-images img {
        width: 15rem;
    }


    /* parte de pagina de recomendações */

    .card-recomendacoes .card1 {
        width: 10rem;
    }

    .card-recomendacoes .card1 img {
        width: 10rem;
    }

    .card-recomendacoes .card2 {
        width: 10rem;
    }

    .card-recomendacoes .card2 img {
        width: 10rem;
    }

    .card-recomendacoes .card3 {
        width: 10rem;
    }

    .card-recomendacoes .card3 img {
        width: 10rem;
    }

    .card-recomendacoes .card4 {
        width: 10rem;
    }

    .card-recomendacoes .card4 img {
        width: 10rem;
    }

    .card-recomendacoes {
        display: flex;
        justify-content: space-between;
    }

    .texto-recomendacoes h1 {
        font-size: 2rem;
    }
    .descricao-recomendacoes{
        margin: 1rem;
    }
    .descricao-recomendacoes h1{
        font-size: 1rem;
    }
    
    .descricao-recomendacoes p{
        font-size: 1rem;
    }

    /* parte da pagina de login */
    body{
        background-image: none;
    }
}