.carousel {
    position: relative;
    box-sizing: border-box;
}
.carousel *,
.carousel *:before,
.carousel *:after {
    box-sizing: inherit;
}
.carousel.is-draggable {
    cursor: move;
    cursor: grab;
}
.carousel.is-dragging {
    cursor: move;
    cursor: grabbing;
}
.carousel__viewport {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}
.carousel__track {
    display: flex;
}
.carousel__slide {
    flex: 0 0 auto;
    width: var(--carousel-slide-width, 60%);
    max-width: 100%;
    padding: 1rem;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.has-dots {
    margin-bottom: calc(0.5rem + 22px);
}
.carousel__dots {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    list-style: none;
    user-select: none;
}
.carousel__dots .carousel__dot {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    width: 22px;
    height: 22px;
    cursor: pointer;
}
.carousel__dots .carousel__dot:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: currentColor;
    opacity: 0.25;
    transition: opacity 0.15s ease-in-out;
}
.carousel__dots .carousel__dot.is-selected:after {
    opacity: 1;
}
.carousel__button {
    width: var(--carousel-button-width, 48px);
    height: var(--carousel-button-height, 48px);
    padding: 0;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
    cursor: pointer;
    color: var(--carousel-button-color, currentColor);
    background: var(--carousel-button-bg, transparent);
    border-radius: var(--carousel-button-border-radius, 50%);
    box-shadow: var(--carousel-button-shadow, none);
    transition: opacity 0.15s ease;
}
.carousel__button.is-prev,
.carousel__button.is-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.carousel__button.is-prev {
    left: 10px;
}
.carousel__button.is-next {
    right: 10px;
}
.carousel__button[disabled] {
    cursor: default;
    opacity: 0.3;
}
.carousel__button svg {
    width: var(--carousel-button-svg-width, 50%);
    height: var(--carousel-button-svg-height, 50%);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--carousel-button-svg-stroke-width, 1.5);
    stroke-linejoin: bevel;
    stroke-linecap: round;
    filter: var(--carousel-button-svg-filter, none);
    pointer-events: none;
}