.brands-row {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap to the next line on smaller screens */
    gap: 20px; /* Space between items */
    margin: 0 -10px; /* Adjust margin to align with padding inside i<div class="space">

.brand-item {
    flex: 1 1 200px; /* Adjust the size of each item */
    box-sizing: border-box;
    padding: 10px; /* Ensure padding is consistent */
    text-align: center;
    margin: 10px; /* Spacing around items */
}

.brand-title {
    margin-top: 10px;
    font-size: 18px;
}


/* For mobile devices */
@media (max-width: 768px) {
    .brand-item {
        flex: 1 1 calc(100% - 20px); /* 1 item per row */
    }
}

/* For very small mobile devices (e.g., 480px and below) */
@media (max-width: 480px) {
    .brand-item {
        flex: 1 1 calc(33.333% - 10px) /* Full width on very small screens */
    }

    .brands-row {
        padding: 10px; /* Adjust padding for small screens */
    }

    .brand-item {
        margin: 10px 0; /* Ensure space between items on small screens */
    }
}