/* =============================================================================
   Banners
   ========================================================================== */

.tx-sf-banners > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tx-sf-banners .banner {
  width: 32%;
  margin: 0.8em 2% 1em 0;
}

.tx-sf-banners .banner:nth-child(3n) {
  margin-right: 0;
}

.tx-sf-banners .banner a {
  position: relative;
  display: block;
}

.tx-sf-banners .banner img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(var(--c-neutral-light));
}

.tx-sf-banners .banner a[rel]::after {
  content: '\f08e';
  font-family: 'FaSolid', sans-serif;
  color: rgb(var(--c-primary));
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0.3rem;
  font-size: 87%;
  line-height: 100%;
  vertical-align: baseline;
  background: rgba(var(--c-neutral-lightest), 0.7);
}

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

@media (min-width: 901px) {
  .tx-sf-banners .banner {
    width: 15%;
    margin-bottom: 0.8em;
  }

  .tx-sf-banners .banner:nth-child(3n) {
    margin-right: 2%;
  }

  .tx-sf-banners .banner:nth-child(6n) {
    margin-right: 0;
  }
}