.moreitemswrapper{
    width: 90%;
    max-width: 540px;
    margin-inline: auto;
    position: relative;
    top: -2rem;
    height: 120px;
    margin-top: 5rem;
    overflow: hidden;
    overflow-x: auto;
    transform: translateZ(-20px) scale(1.6);
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 5%,
      rgba(0, 0, 0, 1) 95%,
      rgba(0, 0, 0, 0)
    );
    filter: drop-shadow(0 0.1px 1px #000);
  }
  
  @keyframes scrollLeft {
    to {
      left: -200px;
    }
  }
  
  .moreitemswrapper a {
      color: #fff;
      text-decoration: none;
  }
  
  .moreitemswrapper h1 {
      color: #fff;
      text-align: center;
      position: relative;
      top: 0.9rem;
      font-size: 30px;
  }
  
  .moreitem {
    width: 150px;
    height: 75px;
    background-color: #000;
    border-radius: 10px;
    position: absolute;
    top: 1rem;
    left: max(calc(200px * 4), 100%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    filter:drop-shadow(0 3px 3px #000);
  }
  
  .moreitem1 {
    animation-delay: calc(30s / 6 * (6 - 1) * -1);
  }
  
  .moreitem2 {
    animation-delay: calc(30s / 6 * (6 - 2) * -1);
  }
  
  .moreitem3 {
    animation-delay: calc(30s / 6 * (6 - 3) * -1);
  }
  
  .moreitem4 {
    animation-delay: calc(30s / 6 * (6 - 4) * -1);
  }
  
  .moreitem5 {
    animation-delay: calc(30s / 6 * (6 - 5) * -1);
  }
  
  .moreitem6 {
    animation-delay: calc(30s / 6 * (6 - 6) * -1);
  }