.banner {
    padding: 10px 0;
    user-select: none;
    overflow: hidden;
    display: flex;
    margin: auto;
    position: relative;
    width: 100%;
}

    .banner img.slide {
        flex: auto;
        cursor: pointer;
        width: auto;
        object-fit: scale-down;
        -webkit-user-drag: none;
    }

    .banner .slide {
        flex: none;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: all .3s;
    }

    .banner .controls {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: grid;
    }

        .banner .controls .button {
            width: 50px;
            cursor: pointer;
            height: 50px;
            transform: translateX(100%);
            overflow: hidden;
            position: relative;
            background-color: #788ac0;
            transition: all .3s;
        }

            .banner .controls .button svg {
                height: 50%;
                position: absolute;
                top: 50%;
                fill: #fff;
                left: 50%;
                transform: translate(-50%,-50%);
                transition: fill .3s;
            }

            .banner .controls .button.left {
                background-color: #000;
            }

            .banner .controls .button:hover {
                background-color: #fff;
            }

                .banner .controls .button:hover svg {
                    fill: #000;
                }

    .banner:hover .controls .button {
        transform: translateX(0%);
    }