.carousel {
    width: 100%;
    min-height: 350px;
    display: flex;
    align-items: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    background-color: #dadada;
    padding: 40px 0px;

}

.carousel .carousel-inner {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.carousel .selector {
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 10px;
}

.carousel .c-btn {
    padding: 6px;
    border-radius: 20px;
    border-width: 0px;
    cursor: pointer;
}

.carousel .c-selected {
    background-color: rgb(110, 2, 2);
    box-shadow: inset 5px 5px 5px 1px rgb(214, 38, 38);
    filter: drop-shadow(0 0 0.1rem rgb(100, 100, 100));
}

.carousel .c-unselect {

    background-color: rgb(255, 255, 255);
    box-shadow: inset 5px 5px 6px -6px rgb(150, 150, 150);
    filter: drop-shadow(0 0 0.1rem rgb(100, 100, 100));
}

.carousel-inner .c-item {
    width: 100%;
    display: flex;
    float: left;
    align-items: center;
    align-content: center;
    position: absolute;
    left: 0px;
    justify-content: center;
}

.carousel-inner .c-item .c-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: center;
    column-gap: 10px;
}

.carousel-inner .c-item .c-content .c-image {
    padding: 10px;
    background-color: #e7e7e7;

    max-width: 100%;
}

.carousel-inner .c-item .c-content .c-body {
    padding: 10px;
    width: 45%;
    max-width: 450px;
}