.trusted-brands-container {
    display: flex; /* Equivalent to flex */
    justify-content: center; /* Equivalent to justify-center */
    align-items: center; /* Equivalent to items-center */
    gap: 4rem; /* Equivalent to space-x-16 (16 * 0.25rem = 4rem). For horizontal spacing. */
    flex-wrap: wrap; /* Allows logos to wrap to the next line on smaller screens if there are many */
}

.brand-logo-item {
    flex-shrink: 0; /* Equivalent to flex-shrink-0, prevents logos from shrinking */
    /* If you want a fixed width for each item on small screens, you could add: */
    /* width: 150px; */
}

.brand-logo-frame {
    border: 1px solid #d1d5db; /* Equivalent to border border-gray-300 */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    padding: 1.5rem; /* Equivalent to p-6 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Add specific width/height if frames should be uniform squares */
    /* e.g., width: 150px; height: 100px; */
}

.brand-logo-image {
    height: 5rem; /* Equivalent to h-20 (20 * 0.25rem = 5rem) */
    width: auto; /* Equivalent to w-auto */
    max-width: 210px;
    object-fit: contain; /* Equivalent to object-contain */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
}

/* Optional: Add hover effects if desired, e.g., a slight scale or brightness change */
/* .brand-logo-item:hover .brand-logo-image {
  transform: scale(1.05);
  filter: brightness(1.1);
} */