.__sliderwrap {
    width: 100%;
    height: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    translate: 0 -15%;
}

.__sliderwrap .__slider {
    position: absolute;
    width: 300px;
    height: 200px;
    left: calc(50% - 150px);
    transform-style: preserve-3d;
    transform: perspective(2000px);
    animation: autoRun 20s linear infinite;
    /* display: flex; */
    /* flex-direction: row; */
}

@keyframes autoRun {
    from {
        transform: perspective(2000px) rotateX(-5deg) rotateY(0deg);
    }

    to {
        transform: perspective(2000px) rotateX(-5deg) rotateY(360deg);
    }
}

.__sliderwrap .__slider .__slide {
    position: absolute;
    inset: 0 0 0 0;
    box-shadow: 0px 10px 15px -10px gray;
    border-radius: 25px;
    transform:
        rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(550px);
    cursor: pointer;
}

.__sliderwrap .__slider .__slide img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 15px;
}

/* .__sliderwrap .__slider:hover {
    filter: grayscale(1);
    animation-play-state: paused;

}

.__sliderwrap .__slider .__slide:hover {
    filter: grayscale(0);
} */


@media screen and (min-width: 300px) {}

@media screen and (min-width: 600px) {}

@media screen and (min-width: 1024px) {}