.scroller {
   width: 100%;
}

.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: 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));
      -webkit-transform: translate(calc(-50% - 0.5rem));
      -moz-transform: translate(calc(-50% - 0.5rem));
      -ms-transform: translate(calc(-50% - 0.5rem));
      -o-transform: translate(calc(-50% - 0.5rem));
}
}

.scroller.scroller__inner:hover{
   animation-play-state: paused;
}

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

.tag-list li {
   padding: .9rem;
   /* background: #004eaa; */
   background: #0d6efd;
   color: white;
   border-radius: 0.5rem;
}


@media (min-width: 0px) and (max-width: 575px) {
   .tag-list li {
      padding: .6rem;
   }
}

@media (min-width: 576px) and (max-width: 767px) {
   .tag-list li {
      padding: .8rem;
   }
}