.carousel {
    position: relative;
    font-size: 0;
    button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        background-color: transparent;
        border-color: transparent;
        color: #aaa;
        cursor: pointer;
        i {
            height: 6em;
            width: auto;
        }
        svg {
            height: 4em;
            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;
        }
    }
    div {
        display: flex;
        img {
            display: flex;
            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 {
         img {
            display: flex;
            transition: opacity 0.5s ease-in-out;
            max-width: calc(100% / 2);
            &:nth-child(n+3) {
                display: none;
            }
        }
    }
}