/* Sponsors' rolling images used in the homepage.
 *
 * Thanks Anand Vunnam for sharing the code used as reference.
 * https://bbbootstrap.com/snippets/bootstrap-5-rolling-images-animation-33714815
 **/
@keyframes roll {
  0% {
    left: 0%;
  }
  100% {
    left: -100%;
  }
}
@keyframes roll-reverse {
  0% {
    left: 100%;
  }
  100% {
  left: 0%; }
}
@keyframes roll-clockwise {
  0% {
    left: -100%;
  }
  100% {
  left: 0%; }
}
@keyframes roll-reverse-clockwise {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}
.container {
  .start-roller {
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, #f8f9fa 30%, #f8f9fa00);
  }
  .end-roller {
    right: 0;
    top: 0;
    background-image: linear-gradient(to left, #f8f9fa 30%, #f8f9fa00);
  }
  .start-roller, .end-roller {
    height: 100%;
    width: 40px;
    position: absolute;
    z-index: 1;
  }
  .rollers {
    flex: 0 0 230px;
    .wrapper {
      position: relative;
      // You may need to adjust the wrapper width based on the number of images
      // you are loading. In our case, 15600px is fine to present 65 images.
      // The image size expected is 200x60 pixels.
      width: 15600px;
      height: 80px;
      margin: 0 0 20px 0;
      flex: 0 0 auto;
      .items-container {
        display: flex;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 100%;
        animation-duration: 240s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        &.roll-LL {
          animation-name: roll;
        }
        &.roll-RL {
          animation-name: roll-reverse;
          left: 100%;
        }
        &.reverse-roll-LL {
          animation-name: roll-clockwise;
          left: -100%;
        }
        &.reverse-roll-RL {
          animation-name: roll-reverse-clockwise;
          left: 100%;
        }
        .item {
          flex: 1 1 200px;
          min-width: 0;
          margin: 20px;
          .company {
            filter: grayscale(100%);
            opacity: 0.2;
            width: 100%;
            object-fit: scale-down;
            opacity: 0.4;
            &:hover {
              filter: grayscale(0%);
              opacity: 1;
              cursor: pointer;
            }
          }
          img {
            vertical-align: middle;
            height: 60px;
          }
        }
      }
    }
  }
}