.carousel-wrapper {
    width: 100%;
    overflow: visible;
    position: relative;

    .container {
        margin: 150px auto;
        width: 100%;
        perspective: 2500px;
        position: relative;

        .carousel {
            width: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate360 40s infinite linear;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .carousel-face {
            position: absolute;
            transform-origin: center center;
            width: 180px;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s;

            img {
                width: 180px;
                height: 120px;
                object-fit: contain;
                transition: transform 0.3s;

                &:hover {
                    transform: scale(1.2);
                }
            }
        }
    }

    @media (width <=880px) {
        overflow: hidden;

        .container {
            margin: 50px auto;

            .scroll-wrapper {
                display: flex;
                flex-wrap: nowrap;

                .carousel-face {
                    flex-shrink: 0;
                    margin-right: 25px;
                }
            }
        }
    }

}


@keyframes rotate360 {
    from {
        transform: rotateX(-3deg) rotateY(0deg);
    }

    to {
        transform: rotateX(-3deg) rotateY(-360deg);
    }
}