@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1025.5px);
  }
}
section.hxr-infosectionmarquee {
  font-family: "Roboto";
  line-height: normal;

  .info-bg {
    padding: 74px 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(241, 241, 241, 0.92);
    }

    .content {
      max-width: 1240px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      gap: 32px 59px;
      position: relative;
      z-index: 2;

      .col-ico-title {
        display: flex;
        align-items: flex-start;
        gap: 16px;

        .title {
          font-size: 20px;
          font-weight: 400;
          line-height: normal;
          margin-bottom: 16px;
        }
      }
      .col-text {
        .text {
          font-weight: 300;
          line-height: 140%;
        }
      }
    }
  }
  .marquee {
    margin: 24px 0;
    overflow: hidden;
    container-type: inline-size;

    .marquee-text {
      inline-size: max-content;
      color: #f1f1f1;
      font-family: "Libre Baskerville", "Lora";
      font-size: 24px;
      text-transform: uppercase;
      white-space: nowrap;
      will-change: transform;
      animation: scroll 13s linear infinite;

      span {
        margin-right: 45px;
      }
    }
    &:hover {
      .marquee-text {
        animation-play-state: paused;
      }
    }
  }
}
@media (min-width: 768px) {
  @keyframes scroll {
    100% {
      transform: translateX(-941.5px);
    }
  }
  section.hxr-infosectionmarquee {
    .info-bg {
      padding: 146px 20px;

      .content {
        .col-ico-title {
          flex-basis: calc(50% - 13px);
          max-width: 567px;
          .title {
            font-size: 26px;
          }
        }
        .col-text {
          flex-basis: calc(50% - 46px);
          max-width: 487px;
        }
      }
    }
    .marquee {
      margin: 41px 0;
      .marquee-text {
        font-size: 46px;
        animation-duration: 7s;
      }
    }
  }
}