@keyframes logo-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.logo-autoscroll {
  position: relative;
  display: block;
  overflow: clip;
  max-width: 100%;

  &>.flex-row {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    pointer-events: none;
    width: max-content;
    animation: logo-scroll var(--scroll-duration, 30s) linear infinite;

    & .logo-autoscroll-item {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      padding: 30px;
      margin: 0;
      width: 216px;
      aspect-ratio: 1.13;

      @media (max-width: 767px) {
        & {
          padding: 25px;
          width: 180px;
        }
      }

      @media (max-width: 550px) {
        & {
          padding: 15px;
          width: 160px;
        }
      }

      & img {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        max-width: 216px;
        max-height: 191px;
        object-fit: contain;
        object-position: center center;

        @supports (mix-blend-mode: darken) {
          & {
            mix-blend-mode: darken;
          }
        }

        @media (max-width: 767px) {
          & {
            max-width: 200px;
            max-height: 140px;
          }
        }
      }
    }
  }

  &.blue-section {
    &>.flex-row {
      & .logo-autoscroll-item {
        background: var(--control-black-60);
      }
    }
  }

  & .logo-autoscroll-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 30px;

    @media (max-width: 767px) {
      & {
        margin-top: 30px;
      }
    }
  }

  & .logo-autoscroll-header::before,
  & .logo-autoscroll-header::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #D8D1C1;
  }

  & .logo-autoscroll-header span {
    padding: 0 20px;
  }
}