.jmd-slider {
    --jmd-ratio-desktop: 1.45;
    --jmd-ratio-mobile: 1;
    --jmd-slider-radius: 10px;
    --jmd-object-fit: cover;
    --jmd-pagination-active: #5b5b5b;
    --jmd-pagination-inactive: #d8d8d8;
    --jmd-pagination-width: 50px;
    --jmd-pagination-height: 5px;
    --jmd-pagination-gap: 10px;
    --jmd-pagination-radius: 99px;
    --jmd-pagination-top: 14px;
    --jmd-pagination-bottom: 10px;
    --jmd-nav-background: #fff;
    --jmd-nav-color: #171717;
    --jmd-nav-border: #dedede;
    --jmd-nav-size: 44px;
    --jmd-nav-icon-size: 22px;
    --jmd-nav-radius: 10px;
    --jmd-nav-gap: 8px;
    --jmd-nav-bottom: 10px;
    --jmd-nav-right: 10px;

    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    position: relative;
    touch-action: pan-y;
}

.jmd-slider *,
.jmd-slider *::before,
.jmd-slider *::after {
    box-sizing: border-box;
}

.jmd-slider__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: var(--jmd-ratio-desktop) / 1;
    overflow: hidden;
    border-radius: var(--jmd-slider-radius);
    background: #f3f3f3;
}

.jmd-slider.has-slider-shadow .jmd-slider__viewport {
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.10);
}

.jmd-slider__track {
    display: flex;
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.65, 0, .35, 1);
}

.jmd-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.jmd-slider__slide > a,
.jmd-slider__slide picture,
.jmd-slider__slide img {
    display: block;
    width: 100%;
    height: 100%;
}

.jmd-slider__slide img {
    object-fit: var(--jmd-object-fit);
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.jmd-slider__navigation {
    position: absolute;
    right: var(--jmd-nav-right);
    bottom: var(--jmd-nav-bottom);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--jmd-nav-gap);
}

.jmd-slider__button {
    appearance: none;
    width: var(--jmd-nav-size);
    height: var(--jmd-nav-size);
    padding: 0;
    border: 1px solid var(--jmd-nav-border);
    border-radius: var(--jmd-nav-radius);
    background: var(--jmd-nav-background);
    color: var(--jmd-nav-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}

.jmd-slider.has-nav-shadow .jmd-slider__button {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

.jmd-slider__button:hover {
    transform: translateY(-1px);
}

.jmd-slider__button:active {
    transform: translateY(0) scale(.97);
}

.jmd-slider__button:focus-visible,
.jmd-slider__dot:focus-visible {
    outline: 3px solid rgba(30, 144, 255, .45);
    outline-offset: 2px;
}

.jmd-slider__button svg {
    width: var(--jmd-nav-icon-size);
    height: var(--jmd-nav-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jmd-slider__pause .jmd-icon-play {
    display: none;
    fill: currentColor;
    stroke: none;
}

.jmd-slider.is-paused .jmd-slider__pause .jmd-icon-pause {
    display: none;
}

.jmd-slider.is-paused .jmd-slider__pause .jmd-icon-play {
    display: block;
}

.jmd-slider__pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--jmd-pagination-gap);
    margin-top: var(--jmd-pagination-top);
    margin-bottom: var(--jmd-pagination-bottom);
    padding-inline: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.jmd-slider__pagination::-webkit-scrollbar {
    display: none;
}

.jmd-slider__dot {
    appearance: none;
    flex: 0 0 var(--jmd-pagination-width);
    width: var(--jmd-pagination-width);
    height: var(--jmd-pagination-height);
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--jmd-pagination-radius);
    background: var(--jmd-pagination-inactive);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.jmd-slider__dot.is-active {
    background: var(--jmd-pagination-active);
}

.jmd-slider__dot:hover {
    transform: scaleY(1.25);
}

.jmd-slider-placeholder {
    padding: 18px;
    border: 1px dashed #c8c8c8;
    border-radius: 8px;
    background: #fafafa;
    color: #555;
    font-size: 14px;
}

@media (max-width: 767px) {
    .jmd-slider__viewport {
        aspect-ratio: var(--jmd-ratio-mobile) / 1;
    }

    .jmd-slider__navigation {
        right: max(8px, var(--jmd-nav-right));
        bottom: max(8px, var(--jmd-nav-bottom));
    }

    .jmd-slider__button {
        width: min(var(--jmd-nav-size), 42px);
        height: min(var(--jmd-nav-size), 42px);
    }

    .jmd-slider__pagination {
        padding-inline: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jmd-slider__track,
    .jmd-slider__button,
    .jmd-slider__dot {
        transition-duration: .01ms !important;
    }
}