/* Estilos básicos para o container de produtos */
.product-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Estilos básicos para cada produto */
.product {
    flex: 1 1 calc(50% - 10px); /* 50% largura menos margem */
    margin: 5px;
    box-sizing: border-box;
}

/* Media query para desktops */
@media (min-width: 768px) {
    .product {
        flex: 1 1 calc(25% - 10px); /* 25% largura menos margem */
    }
}