/* animations */
.slide-in-right{
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  }
  
  .slide-in-left{
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  }
  
  .fade-in{
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  
  .show-animation{
    opacity: 1;
    transform: translateX(0);
  }
  
  /* scroller animation */
  .scroller{
    max-width: var(--mw-content);
    overflow: hidden;
  }
  
.scroller .scroller__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    overflow: hidden;
}
  
.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: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
}
  
.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: 60s;
}
  
  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }
  
  .scroller .tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
    padding: 10px;
  }
  
  .scroller .tag-list li {
    padding: 2rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 1rem -1px #00000014;
  }
  
  .scroller .tag-list li img{
    max-height: 170px;
  }

@media(max-width: 900px){
    .scroller .tag-list {
        margin: 0;
        padding-inline: 0;
        list-style: none;
    }
    .scroller{
        max-width: 100%;
    }

    .scroller .tag-list li img {
        max-height: 106px;
    }
}