<ul class="logoGrid">
    <li class="logoGrid__item">
        <a href="#" class="logoGrid__link">
            <span class="srOnly">Logo name</span>
        </a>
        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </li>
    <li class="logoGrid__item">
        <a href="#" class="logoGrid__link">
            <span class="srOnly">Logo name</span>
        </a>
        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </li>
    <li class="logoGrid__item">
        <a href="#" class="logoGrid__link">
            <span class="srOnly">Logo name</span>
        </a>
        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </li>
    <li class="logoGrid__item">
        <a href="#" class="logoGrid__link">
            <span class="srOnly">Logo name</span>
        </a>
        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </li>
    <li class="logoGrid__item">
        <a href="#" class="logoGrid__link">
            <span class="srOnly">Logo name</span>
        </a>
        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </li>
    <li class="logoGrid__item">
        <a href="#" class="logoGrid__link">
            <span class="srOnly">Logo name</span>
        </a>
        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </li>
</ul>

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

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

    &__item {
        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();
    }
}