:root {
    --cont-width: 1140px;
    --left-off: calc(var(--cont-width) - (var(--cont-width)*2));
    --slide-width: calc(-16px + (var(--cont-width)/4));
}

@media (max-width: 500px) {
    :root {
        --cont-width: 874px;
        --left-off: calc(var(--cont-width) - (var(--cont-width)*2));
        --slide-width: calc(-16px + (var(--cont-width))/4);
}}

.stripe-section {
    /* width: 96%;
    max-width: 1200px; */
    margin: auto;
    text-align: center;
    padding-block: 8rem 18rem;
    background-image: linear-gradient(0deg, rgb(0, 0, 0, 0.9) 60%, rgba(255, 255, 255, 0.05) 95%);
    border-bottom: 1px solid rgb(45, 45, 45);
}

@media (max-width: 500px ) {
    .stripe-section {
        padding-block: 4rem 11rem;
    }
}

.stripe-carrousel {
    margin-top: 4rem;
    display: flex;
    place-items: center;
    max-width: 1300px;
    margin-inline: auto;
    /* border: 2px solid red; */
    transform: rotate(-2deg);
}

.stripe-ubercont {
    margin-inline: auto; 
    position: relative;
    width: var(--cont-width);
    /* box-shadow: 0px 0px 190px 0px rgba(255, 255, 255, 0.2); */
    padding-block: 4px;
    overflow: hidden;
}

.stripe-untercont {
    transform: translateX(var(--left-off));
}

.stripe-subcont {
    display: flex;
}

.perforation {
    position: relative;
    height: 20px; /* Adjust height as needed */
    width: calc((var(--cont-width)*3));
    /* width: 3348px; */
    margin-block: 12px;
    /* left: -11px; */
    /* left: -8px; */
    background: repeating-linear-gradient(
        to right,
        black 0,
        black 20px,
        white 20px,
        white 38px
    );
}

.one-shot {
    /* min-width: 263px; */
    min-width: var(--slide-width);
    background-color: white;
    height: calc(var(--slide-width)*0.8);
    align-self: center;
    margin-inline: 8px;
    border-radius: 5px;
    display: grid;
    place-content: center;
    font-size: 5rem;
}

.arrow-left2, .arrow-right2 {
    color: rgba(177, 177, 177, 0.352);
    font-size: 3rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.5s;
}

.arrow-left2 {
    padding-right: 12px;
}
.arrow-left2:hover {
    transition: all 0.5s;
    color: rgb(224, 224, 224);
}
.arrow-right2 {
    padding-left: 12px; 
}
.arrow-right2:hover {
    transition: all 0.5s;
    color: rgb(224, 224, 224);
}

/***********************************************/

.move-left {
    animation: moveLeft 5s linear infinite;
}

.move-right {
    animation: moveRight 5s linear infinite;
}

.pause {
    animation-play-state: paused;
}

/* :root {
    --start: -1116px;
    --end-right: 0px;
    --end-left: -2232px;
} */

:root {
    --start: var(--left-off);
    --end-right: 0px;
    --end-left: calc(var(--left-off)*2);
}

@keyframes moveLeft {
    from {transform: translateX(var(--start))}
    to {transform: translateX(var(--end-right))}
}

@keyframes moveRight {
    from {transform: translateX(var(--start))}
    to {transform: translateX(var(--end-left))}
}


@media (max-width: 900px ) {
    .arrow-left2, .arrow-right2 {
        font-size: 2rem;
        position: absolute;
        color: rgba(177, 177, 177, 0.8);
        opacity: 0.5;
        user-select: none;
    }
    .one-shot {
        user-select: none;
    }
    .arrow-left2 {
        left: 10px;
        z-index: 1001;
    }
    .arrow-right2 {
        right: 10px;
    }
    /* .one-box {
        div {
            height: 335px;
            width: 235px;
        }
    } */
}

/* @media (hover: none) {
    .arrow-left2, .arrow-right2 {
        pointer-events: none;
    }
} */