Pronto, a frontend framework built by Imarc

<h2>Logo Cloud</h2>

<div class="logoCloud">
    <div class="logoCloud__logos">
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </div>
    </div>
</div>

<h2>Logo Cloud with Links</h2>

<div class="logoCloud -reduced">
    <ul class="logoCloud__logos">
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
        <li class="logoCloud__logo">
            <a href="#" class="logoCloud__link">
                <span class="srOnly">Logo name</span>
            </a>
            <img class="logoCloud__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
        </li>
    </ul>
</div>

index.scss

@use "@imarc/pronto/resources/styles/imported" as *;

.logoCloud {
    $b: &;
    
    &.-reduced {
        #{$b}__logo {
            height: fluid-rems(2, 3);
        }
    }

    &__logos {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: fluid-rems(2, 3);
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    &__logo {
        height: fluid-rems(5, 7.5);
        max-width: 230px;
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__img,
    img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        display: block;
        margin-bottom: 0;
    }

    &__link {
        @include pseudo-link();
    }
}