.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;
    width: 200px;
    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 */
}


@media(max-width: 640px) {
    .trusted-brands-container {
        flex-direction: column;
        gap: 1rem;
    }

    .brand-logo-item {
        width: 100%;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
}