@media (max-width: 1300px) {
  .wrapper {
    width: 100%;
    max-width: 153.6rem;
    margin-inline: auto;
    position: relative;
    height: 4rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*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)
    );*/
  }

  @keyframes scrollLeft {
    to {
      left: -110rem;
    }
  }

  .item {
    width: 50rem;
    height: 100%;
    color: white;
    background-color: #f57faa;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 400;
    /*background-color: #0071FF;*/
    /*background:linear-gradient(90deg,#f57faa);*/
    position: absolute;
    left: max(calc(7rem * 8), 210%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .ads-dot {
    height: .5rem;
    width: .5rem;
    background-color: white;
    border-radius: 1rem;
  }

  .item1 {
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
  }

  .item2 {
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
  }

  .item3 {
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
  }

  .item4 {
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
  }

  .item5 {
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
  }

  .item6 {
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
  }

  .item7 {
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
  }

  .item8 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

  .item9 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

  .item10 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }
}

@media (max-width: 1251px) {
  .wrapper {
    width: 100%;
    max-width: 153.6rem;
    margin-inline: auto;
    position: relative;
    height: 4rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*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)
    );*/
  }

  @keyframes scrollLeft {
    to {
      left: -132rem;
    }
  }

  .item {
    width: 48rem;
    height: 100%;
    color: white;
    background-color: #f57faa;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    /*background-color: #0071FF;*/
    /*background:linear-gradient(90deg,#f57faa);*/
    position: absolute;
    left: max(calc(7rem * 8), 210%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .ads-dot {
    height: .5rem;
    width: .5rem;
    background-color: white;
    border-radius: 1rem;
  }

  .item1 {
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
  }

  .item2 {
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
  }

  .item3 {
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
  }

  .item4 {
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
  }

  .item5 {
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
  }

  .item6 {
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
  }

  .item7 {
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
  }

  .item8 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

  .item9 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

  .item10 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }
}

@media (max-width: 1204px) {
  .wrapper {
    width: 100%;
    max-width: 153.6rem;
    margin-inline: auto;
    position: relative;
    height: 4rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*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)
    );*/
  }

  @keyframes scrollLeft {
    to {
      left: -132rem;
    }
  }

  .item {
    width: 48rem;
    height: 100%;
    color: white;
    background-color: #f57faa;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    /*background-color: #0071FF;*/
    /*background:linear-gradient(90deg,#f57faa);*/
    position: absolute;
    left: max(calc(7rem * 8), 210%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .ads-dot {
    height: .5rem;
    width: .5rem;
    background-color: white;
    border-radius: 1rem;
  }

  .item1 {
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
  }

  .item2 {
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
  }

  .item3 {
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
  }

  .item4 {
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
  }

  .item5 {
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
  }

  .item6 {
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
  }

  .item7 {
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
  }

  .item8 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

  .item9 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

  .item10 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }
}

@media (max-width: 1170px) {
  .wrapper {
    width: 100%;
    max-width: 153.6rem;
    margin-inline: auto;
    position: relative;
    height: 4rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*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)
    );*/
  }

  @keyframes scrollLeft {
    to {
      left: -132rem;
    }
  }

  .item {
    width: 48rem;
    height: 100%;
    color: white;
    background-color: #f57faa;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    /*background-color: #0071FF;*/
    /*background:linear-gradient(90deg,#f57faa);*/
    position: absolute;
    left: max(calc(7rem * 8), 210%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .ads-dot {
    height: .5rem;
    width: .5rem;
    background-color: white;
    border-radius: 1rem;
  }

  .item1 {
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
  }

  .item2 {
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
  }

  .item3 {
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
  }

  .item4 {
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
  }

  .item5 {
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
  }

  .item6 {
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
  }

  .item7 {
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
  }

  .item8 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

  .item9 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

  .item10 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }
}

@media (max-width: 1145px) {

  @keyframes scrollLeft {
    to {
      left: -152rem;
    }
  }

}

@media (max-width: 1041px) {

  @keyframes scrollLeft {
    to {
      left: -174rem;
    }
  }

}

@media (max-width: 989px) {

  .wrapper {
    width: 100%;
    max-width: 153.6rem;
    margin-inline: auto;
    position: relative;
    height: 4rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*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)
    );*/
  }

  @keyframes scrollLeft {
    to {
      left: -160rem;
    }
  }

  .item {
    width: 45rem;
    height: 100%;
    color: white;
    background-color: #f57faa;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    /*background-color: #0071FF;*/
    /*background:linear-gradient(90deg,#f57faa);*/
    position: absolute;
    left: max(calc(7rem * 8), 210%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .ads-dot {
    height: .5rem;
    width: .5rem;
    background-color: white;
    border-radius: 1rem;
  }

}

@media (max-width: 910px) {

  @keyframes scrollLeft {
    to {
      left: -177rem;
    }
  }

}


@media (max-width: 836px) {

  @keyframes scrollLeft {
    to {
      left: -193rem;
    }
  }

}

@media (max-width: 762px) {

  @keyframes scrollLeft {
    to {
      left: -207rem;
    }
  }

}

@media (max-width: 695px) {

  @keyframes scrollLeft {
    to {
      left: -222rem;
    }
  }

}

@media (max-width: 620px) {

  @keyframes scrollLeft {
    to {
      left: -238rem;
    }
  }

}

@media (max-width: 547px) {

  @keyframes scrollLeft {
    to {
      left: -253rem;
    }
  }

}

@media (max-width: 484px) {

  @keyframes scrollLeft {
    to {
      left: -266rem;
    }
  }

}

@media (max-width: 415px) {

  @keyframes scrollLeft {
    to {
      left: -281rem;
    }
  }

}

@media (max-width: 344px) {

  @keyframes scrollLeft {
    to {
      left: -289rem;
    }
  }

}