.notebook{
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.notebook img{
    width: 300px;
    height: 250px;
}

.minipro{
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.minipro img{
    width: 350px;
    height: 250px;
}

.mobilidade{
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.mobilidade img{
    width: 300px;
    height: 410px;
}

.cols > *{
    cursor: pointer;
    transition: all 0.2s;
}

@media (max-width: 1300px){
    .mobilidade{
        grid-template-columns: repeat(3, 1fr);
    }
    .mobilidade img{
        width: 300px;
        height: 410px;
    }
}


@media (max-width: 800px){
    .section-title{
        font-size: 1rem;
    }
    
    .cols-3{
        grid-template-columns: repeat(1, 1fr);
    }
    .cols-4{
        grid-template-columns: repeat(2, 1fr);
    }

    .cols-5{
        grid-template-columns: repeat(2, 1fr);
    }

    .notebook{
        grid-template-columns: repeat(2, 1fr);
    }

    .minipro{
        grid-template-columns: repeat(2, 1fr);
    }

    .mobilidade{
        grid-template-columns: repeat(2, 1fr);
    }

    .mobilidade img{
        width: 200px;
        height: 310px;
    }

    .product-name, .product-price, .rate{
        max-height: 1rem;
        overflow: hidden;
        font-size: 0.8rem;
    }

    .exclusive-container{
        flex-direction: column-reverse;
    }

    .exclusive-container img{
        margin-bottom: 4rem;
    }
}

@media (max-width: 500px){
    .section-title{
        font-size: 1rem;
    }
    
    .cols-3{
        grid-template-columns: repeat(1, 1fr);
    }
    .cols-4{
        grid-template-columns: repeat(1, 1fr);
    }

    .cols-5{
        grid-template-columns: repeat(1, 1fr);
    }

    .notebook{
        grid-template-columns: repeat(1, 1fr);
    }

    .minipro{
        grid-template-columns: repeat(1, 1fr);
    }

    .mobilidade{
        grid-template-columns: repeat(1, 1fr);
    }

    .mobilidade img{
        width: 200px;
        height: 310px;
    }

    .product-name, .product-price, .rate{
        max-height: 1rem;
        overflow: hidden;
        font-size: 0.8rem;
    }

    .exclusive-container{
        flex-direction: column-reverse;
    }

    .exclusive-container img{
        margin-bottom: 4rem;
    }
}