* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.carousel {
    /*background-color: blue;*/
    height: 400px;
    width: 100%;
    padding-bottom: 20px;
}

.carousel .carousel-item {
    width: 100%;
    max-width: 600px;
    user-select: none;
    display: flex;
    align-items: center;
}

.carousel .carousel-item a {
    width: 100%;
}

.carousel .carousel-item a:hover {
    box-shadow: 1px 1px 5px white;
}

.carousel .carousel-item a img {
    width: 100%;
    height: 230px;
    border: none;
    margin-bottom: -5px;
}

.carousel .indicators .indicator-item {
    margin-left: 10px;
}

@media screen and (max-width: 800px){
    
    .carousel .carousel-item {
        width: 90%;
    }
}

@media screen and (max-width: 700px){

    .carousel {
        margin-top: -50px;
    }

    .carousel .carousel-item {
        width: 100%;
    }

    .carousel .carousel-item a img {
        height: 220px;
    }
}

@media screen and (max-width: 500px){

    .carousel {
        width: 100%;
    }

    .carousel .carousel-item {
        width: 100%;
    }

    .carousel .carousel-item a img {
        height: 180px;
    }
}

@media screen and (max-width: 350px){

    .carousel {
        padding: 0px;
    }

    .carousel .carousel-item {
        width: 100%;
    }

    .carousel .carousel-item a img {
        height: 130px;
    }

    .carousel .indicators .indicator-item {
        margin-bottom: 70px;
    }
}

@media screen and (max-width: 275px){
    .carousel .indicators .indicator-item {
        display: none;
    }    
}