<h2>Logo Cloud</h2>

<div class="logoCloud">
    <div class="logoCloud__logos">
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://img.logoipsum.com/279.svg" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://img.logoipsum.com/278.svg" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://img.logoipsum.com/277.svg" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://img.logoipsum.com/276.svg" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://img.logoipsum.com/275.svg" />
        </div>
        <div class="logoCloud__logo">
            <img class="logoCloud__img" alt="Logo Name" src="https://img.logoipsum.com/274.svg" />
        </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://img.logoipsum.com/225.svg" />
        </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://img.logoipsum.com/224.svg" />
        </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://img.logoipsum.com/226.svg" />
        </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://img.logoipsum.com/325.svg" />
        </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://img.logoipsum.com/248.svg" />
        </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://img.logoipsum.com/246.svg" />
        </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://img.logoipsum.com/244.svg" />
        </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://img.logoipsum.com/221.svg" />
        </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://img.logoipsum.com/286.svg" />
        </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://img.logoipsum.com/256.svg" />
        </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://img.logoipsum.com/255.svg" />
        </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://img.logoipsum.com/254.svg" />
        </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://img.logoipsum.com/252.svg" />
        </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://img.logoipsum.com/270.svg" />
        </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://img.logoipsum.com/269.svg" />
        </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://img.logoipsum.com/268.svg" />
        </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://img.logoipsum.com/267.svg" />
        </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://img.logoipsum.com/265.svg" />
        </li>
    </ul>
</div>

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

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

    &__logos {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: pronto.fluid-rems(2, 3);
        justify-content: center;
    }

    &__logo {
        height: pronto.fluid-rems(5, 7.5);
        width: auto;
        position: relative;
    }

    &__img {
        height: 100%;
        width: auto;
        min-inline-size: 100%;
    }

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