.associates-section {
  display: flex;
  justify-content: center;
  align-content: center;

  /* background: var(--clr-palette-4); */

  background-image: linear-gradient(var(--clr-palette-4), var(--clr-palette-5));
}

.associates {
  /* background-color: var(--clr-palette-5); */

  background-image: linear-gradient(var(--clr-palette-5), var(--clr-palette-4));

  display: flex;
  justify-content: center;
  align-items: center;
}

.associates-heading {
  font-family: monospace;
  color: var(--clr-palette-1);

  text-align: center;

  font-size: 3em;
}

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list div {
  padding: 1rem;
  background: var(--clr-palette-3);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-palette-5);

  height: 13em;
  width: 23em;

  background-repeat: no-repeat;
  background-size: 60%;
  background-position-x: 4.7em;
}
.tag-list div:nth-child(1) {
  background-image: url(../IMAGES/associates/Leap.png);
  background-size: 50%;
  background-position: 5em;
}
.tag-list div:nth-child(2) {
  background-image: url(../IMAGES/associates/SARS.png);
  background-size: 50%;
  background-position: 6em;
}
/*.tag-list div:nth-child(2) {
  background-image: url(../IMAGES/associates/SWGC.png);
  background-size: 100%;
  background-position: 0;
}*/
.tag-list div:nth-child(3) {
  background-image: url(../IMAGES/associates/KP.png);
  background-size: 60%;
}
.tag-list div:nth-child(4) {
  background-image: url(../IMAGES/associates/ZD.png);
  background-size: 60%;
}
.tag-list div:nth-child(5) {
  background-image: url(../IMAGES/associates/Zac.png);
  background-size: 70%;
}
.tag-list div:nth-child(6) {
  background-image: url(../IMAGES/associates/KK.png);
  background-size: 60%;
}
.tag-list div:nth-child(7) {
  background-image: url(../IMAGES/associates/Stallion.png);
  background-size: 55%;
  background-position-x: 6.3em;
  background-position-y: .2em;
}
.tag-list div:nth-child(8) {
  background-image: url(../IMAGES/associates/OM.png);
  background-size: 60%;
}
.tag-list div:nth-child(9) {
  background-image: url(../IMAGES/associates/Pixxel.png);
  background-size: 60%;
}
.tag-list div:nth-child(10) {
  background-image: url(../IMAGES/associates/JB.png);
  background-size: 60%;
}
.tag-list div:nth-child(11) {
  background-image: url(../IMAGES/associates/Siyaykokotela.png);
  background-size: 60%;
}
.tag-list div:nth-child(12) {
  background-image: url(../IMAGES/associates/Monisapula.png);
  background-size: 100%;
  background-position: 0;
}
.tag-list div:nth-child(13) {
  background-image: url(../IMAGES/associates/Yellowwood.png);
  background-size: 90%;
  background-position-y: -3em;
  background-position-x: .8em;
}

.scroller {
  width: 600px;
}

@media (min-width: 45rem) {
  .scroller {
    width: 70rem;
  }
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;

  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: fit-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-animated="true"] .scroller__inner:hover {
  animation-play-state: paused;
  cursor: pointer;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}
.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}
.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}
.scroller[data-speed="slow"] {
  --_animation-duration: 120s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}