.carousel {
    overflow: hidden;
    width: 90%;
    margin: 10px auto;

    & > div {
        transform-style: preserve-3d;

        img {
            opacity: 0;
            position: absolute;
            top: 0;
            width: 100%;
            height: 500px;
            object-fit: contain;
            margin: auto;
            padding: 1rem 4rem;
            z-index: 50;
            transition: transform .5s, opacity .5s, z-index .5s;

            &.carousel-initial, &.carousel-active {
                opacity: 1;
                position: relative;
                z-index: 70;
            }

            &.next {
                transform: translateX(-100%);
            }

            &.prev {
                transform: translateX(100%);
            }
        }

        .carousel-button-next, .carousel-button-prev {
            position: absolute;
            top: 50%;
            height: 2rem;
            width: 2rem;
            background-color: var(--blue);
            transform: translateY(-50%);
            border-radius: 50%;
            cursor: pointer;
            z-index: 101;
            border: none;

            &::after {
                content: " ";
                position: absolute;
                width: 0.75rem;
                height: 0.75rem;
                top: 50%;
                border-right: 3px solid white;
                border-bottom: 3px solid white;
            }
        }

        .carousel-button-next {
            right: 0;

            &::after {
                left: 45%;
                transform: translate(-50%, -50%) rotate(-45deg);
            }
        }

        .carousel-button-prev {
            left: 0;

            &::after {
                left: 55%;
                transform: translate(-50%, -50%) rotate(135deg);
            }
        }
    }
}