.carousel {
    overflow: hidden;
}

    .carousel [data-slide] {
        outline: none;
        padding: 0;
        margin: 0 0.5rem;
        height: 36px;
        width: 36px;
        cursor: pointer;
        transition: .3s;
        border-radius: 50%;
        background-color: rgba(31,45,61,.5);
        border: solid 1px #e9ecef;
        color: #fff;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        font-size: 1rem;
    }

    .carousel:not(.hover) .carousel-control-prev {
        opacity: 0;
        left: -10px
    }

    .carousel:not(.hover) .carousel-control-next {
        opacity: 0;
        right: -10px;
    }

    .carousel:not(.hover) .carousel-indicators {
        opacity: 0;
        bottom: -10px;
    }

    .carousel .carousel-indicators {
        opacity: 1;
        transition: all .2s linear;
    }

    .carousel .carousel-item img {
        display: block;
    }
