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

.portfolio-tag-list li {
flex-shrink: 0;
padding: 1rem;
}

.portfolio-tag-list img {
display: block;
height: 150px;
width: auto;
}

.portfolio-scroller {
padding: 1em 0;
max-width: 80%;
background-color: var(--clr-dark);
margin: 0 auto;
overflow: hidden;
mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
-webkit-mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
}
 
.portfolio-scroller__inner {
display: flex;
flex-wrap: nowrap;
gap: 5rem;
width: max-content;
will-change: transform; /* Optimize for animation */
transform: translateZ(0); /* Force GPU acceleration */
}

.portfolio-scroller .portfolio-scroller__inner {
animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.portfolio-scroller[data-direction="right"] {
--_animation-direction: reverse;
} 

.portfolio-scroller[data-direction="left"] {
--_animation-direction: forwards;
} 

.portfolio-scroller[data-speed="slow"] {
--_animation-duration: 60s;
} 

.portfolio-scroller[data-speed="fast"] {
--_animation-duration: 40s;
}

@keyframes scroll {
from {
  transform: translateX(0);
}
to {
  transform: translateX(calc(-50%));
}
}