.wrapper {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
    max-width: 1500px;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0) 
    );
}

@keyframes scrollLeft {
    to {
        left: -200px;
    }
}

.item_logo {
    width: 150px;
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    left: max(calc(200px * 8), 100%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.item_logo_1 {
    width: 205px;
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
}

.item_logo_2 {
    width: 200px;
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
}

.item_logo_3 {
    width: 200px;
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
}

.item_logo_4 {
    width: 130px;
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
}

.item_logo_5 {
    width: 100px;
    padding-left: 0;
    padding-right: 0;
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
}

.item_logo_6 {
    width: 180px;
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
}

.item_logo_7 {
    width: 180px;
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
}

.item_logo_8 {
    width: 200px;
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
}