Apply gradient and image as logos background

by Jordan Sayner

CSS

.footer__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  padding: 1rem 0;

  a,
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 6.25rem;

    img {
      max-height: 4.6875rem;
      height: auto;
      width: auto;
      display: none;

      &:nth-of-type(1) {
        // Light version
      }

      &:nth-of-type(2) {
        // Dark version
      }
    }
  }

  // Light theme
  .bg--light-grey & {
    a img:nth-of-type(1),
    span img:nth-of-type(1) {
      display: block;
    }
  }

  // Dark theme
  .bg--blue & {
    a img:nth-of-type(2),
    span img:nth-of-type(2) {
      display: block;
    }
  }

  @media (min-width: 768px) {
    gap: 6rem;

    a,
    span {
      img {
        max-height: 6.25rem;
      }
    }
  }
}