.logo-grid-wrapper {
  --logo-grid-gap: 22px;

  position: relative;
  display: block;
  margin: 0;
  padding: 0;

  & .logo-grid {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--logo-grid-gap);

    & li {
      position: relative;
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      padding: 0;
      margin: 0;
      border: 1px solid var(--Light-Blue---30);
      background: var(--Light-Blue---10);
      border-radius: 10px;
      aspect-ratio: 1.0;
      min-height: 200px;
      width: calc(25% - 18px);
      overflow: clip;
      transition: background 800ms var(--ease-out-expo);

      @media (max-width: 1024px) {
        & {
          width: calc(33.33% - 16px);
        }
      }

      @media (max-width: 600px) {
        & {
          width: calc(50% - 16px);
        }
      }

      @media (max-width: 500px) {
        & {
          width: 100%;
          aspect-ratio: 1.5;
        }
      }

      & img {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        max-height: 35px;
        max-width: 180px;
        object-fit: contain;
        object-position: center center;
        transform-origin: center;
        mix-blend-mode: multiply;
      }

      & .logo-grid-types {
        position: absolute;
        display: block;
        text-align: center;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px 15px;
        pointer-events: none;
        color: var(--body-color);
        opacity: 0.7;
        font-size: 0.9rem;
        text-wrap: balance;
        line-height: 1.2;
      }

      & a {
        position: relative;
        display: inline-flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        transition: all 800ms var(--ease-out-expo);
        transform-origin: center;
        width: 100%;
        height: 100%;
        padding: 0 20px;

        &, &:focus {
          background: transparent;
        }

        &:hover, &:active {
          background: #fff;
        }
      }
    }
  }
}