@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

.home-banner {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-size: 100px;
  box-sizing: border-box;
}

.banner-row {
  display: flex;
  align-items: center;
  height: calc(100% / 7);
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--wp--preset--color--contrast);
  box-sizing: border-box;
}

.banner-row span {
  display: inline-block;
  white-space: nowrap;
}

.banner-row-1 span {
  animation: scroll-left 100s linear infinite;
}

.banner-container {
  height: calc((100% / 7) * 6);
}

.banner-row.banner-row-2 {
  height: calc(100% / 6);
}

.banner-row-2 span {
  animation: var(--animation-diraction, scroll-left)
    var(--animation-duration, 100s) linear infinite;
  animation-delay: var(--animation-delay, 0s);
}

@media (min-width: 770px) {
}

@media (max-width: 1100px) {
}

@media (max-width: 770px) {
  .banner-row {
    height: calc(100% / 6);
  }

  .banner-container {
    height: calc((100% / 6) * 5);
  }

  .banner-row.banner-row-2 {
    height: calc(100% / 5);
  }

  .banner-row.banner-row-2:last-child {
    display: none;
  }
}