.carousel {
    position: relative;
    button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;
        border-color: transparent;
        color: #aaa;
        cursor: pointer;
        width: auto;
        i {
            width: auto;
        }
        svg {
            filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
        }
        :hover {
            color: #fff;
        }
        &.is-transparent {
            opacity: 0.3;
        }
        &:first-of-type {
            left: 0;
        }
        &:last-of-type {
            right: 0;
            i {
                transform: rotateY(3.142rad);
            }
        }
    }
    div {
        display: flex;
        img {
            display: flex;
            height: auto;
            transition: opacity 0.5s ease-in-out;
            max-width: calc(100% / 4);
            &:nth-child(n+5) {
              display: none;
            }
        }
    }
 }
 @media screen and (max-width: 480px) {
    .carousel {
        div {
            display: flex;
            img {
                display: flex;
                height: auto;
                transition: opacity 0.5s ease-in-out;
                max-width: calc(100% / 2);
                &:nth-child(n+3) {
                    display: none;
                }
            }
        }
        button {
            padding: 0;
            svg {
                width: 2.5em;
                height: auto;
            }
        }
    }
}