#vue-carousel-app *,
#vue-carousel-app *::before,
#vue-carousel-app *::after {
    box-sizing: border-box;
}

#vue-carousel-app {
    margin: 0;
}

#vue-carousel-app .carousel {
    position: relative;
    height: 200px;
}

#vue-carousel-app .carousel > div {
    background-color: #000;
    color: #fff;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0px;
    left: 200px;
    width: 30vw;
}


/* breakpoint-medium */
@media screen and (min-width: 425px) and (max-width: 767em) {
    #vue-carousel-app .carousel {
        height: 200px;
    }

    #vue-carousel-app .carousel > div {
        top: 0px;
        left: 200px;
        width: 30vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 959em) {
    #vue-carousel-app .carousel {
        height: 400px;
    }

    #vue-carousel-app .carousel > div {
        top: 0px;
        left: 400px;
        width: 30vw;
    }
}

@media screen and (min-width: 960px) and (max-width: 1439em) {
    #vue-carousel-app .carousel {
        height: 300px;
    }

    #vue-carousel-app .carousel > div {
        top: 0px;
        left: 300px;
        width: 20vw;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1524em) {
    #vue-carousel-app .carousel {
        height: 300px;
    }

    #vue-carousel-app .carousel > div {
        top: 0px;
        left: 350px;
        width: 15vw;
    }
}

@media screen and (min-width: 1525px) {
    #vue-carousel-app .carousel {
        height: 500px;
    }

    #vue-carousel-app .carousel > div {
        top: 0px;
        left: 350px;
        width: 15vw;
    }
}