.tx-sf-banners > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap);
  justify-content: center;

  & .banner {
    border: 1px solid rgb(var(--c-neutral-light));
    padding: 1rem 1.5rem;
    height: 150px;
    filter: grayscale(1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    position: relative;
    flex: 0 1 calc(50% - var(--g-gap));
    max-width: 100%;

    & a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;

      &[rel="noopener sponsored"]::after {
        content: '\f08e';
        font-family: 'FaRegular';
        display: block;
        position: absolute;
        top: 6px;
        right: 6px;
        font-size: 10px;
      }
    }

    & img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }
}

@media (hover: hover) {
  .tx-sf-banners .banner:hover {
    filter: grayscale(0);
  }
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 800px) {
  .tx-sf-banners > div .banner {
    flex: 0 1 calc(25% - var(--g-gap));
  }
}

@media (min-width: 1280px) {
  .tx-sf-banners > div .banner {
    flex: 0 1 calc(16.6667% - var(--g-gap));
  }
}