.json_slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    margin: 70px 0;
}

/* Pagination remains hidden at every screen size. */
.json_slider .slick-dots {
    display: none !important;
}

/* Slick creates the navigation controls; responsive rules reveal them. */
.json_slider .slick-arrow {
    display: none !important;
}

.json_slider .slick-list {
    margin: 0;
}

.json_slider .slick-slide img {
    display: block;
    width: 100%;
    height: auto;
    cursor: default;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-drag: none;
}

/*
 * On phones, break out of any padded theme/content container, then add a
 * deliberate 15px gutter on each side. Slick's default slide margins are
 * removed so that the gutter is exactly 15px rather than being compounded.
 */
@media (max-width: 599px) {
    .json_slider {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 15px;
        padding-right: 15px;
    }

    .json_slider .slick-slide {
        margin-left: 0;
        margin-right: 0;
    }

    .json_slider .slick-slide img {
        width: var(--json-slider-mobile-image-width, 100%);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
    }

    .json_slider .slick-arrow {
        position: absolute;
        top: 50%;
        z-index: 10;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 40px;
        min-width: 0;
        height: 40px;
        padding: 0;
        margin: 0;
        overflow: visible;
        color: #111;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        font-size: 0;
        line-height: 1;
        cursor: pointer;
        transform: translateY(-50%);
        -webkit-appearance: none;
        appearance: none;
    }

    .json_slider .slick-arrow:focus {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    .json_slider .slick-arrow::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-top: 3px solid currentColor;
        border-right: 3px solid currentColor;
    }

    .json_slider .slick-prev {
        left: 20px;
    }

    .json_slider .slick-prev::before {
        margin-left: 3px;
        transform: rotate(-135deg);
    }

    .json_slider .slick-next {
        right: 20px;
    }

    .json_slider .slick-next::before {
        margin-right: 3px;
        transform: rotate(45deg);
    }

    .json_slider .slick-arrow.slick-hidden {
        display: none !important;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .json_slider .slick-slide img {
        width: var(--json-slider-tablet-image-width, 100%);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1024px) {
    .json_slider .slick-slide img {
        width: var(--json-slider-desktop-image-width, 100%);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tablet and desktop navigation: independent left and right controls. */
@media (min-width: 600px) {
    /* Slick uses RTL on mobile for the established swipe/tap movement. The
       three-column layout is LTR so saved slides read 1, 2, 3 across the row. */
    .json_slider {
        direction: ltr;
    }

    .json_slider .slick-slide {
        float: left;
    }

    .json_slider .slick-arrow {
        position: absolute;
        top: 50%;
        z-index: 10;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 46px;
        min-width: 0;
        height: 46px;
        padding: 0;
        margin: 0;
        overflow: visible;
        color: #111;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        font-size: 0;
        line-height: 1;
        cursor: pointer;
        transform: translateY(-50%);
        transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
        -webkit-appearance: none;
        appearance: none;
    }

    .json_slider .slick-arrow:hover {
        background: #fff;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
        transform: translateY(-50%) scale(1.04);
    }

    .json_slider .slick-arrow:focus {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }

    .json_slider .slick-arrow::before {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        border-top: 3px solid currentColor;
        border-right: 3px solid currentColor;
    }

    .json_slider .slick-prev {
        left: 12px;
    }

    .json_slider .slick-prev::before {
        margin-left: 4px;
        transform: rotate(-135deg);
    }

    .json_slider .slick-next {
        right: 12px;
    }

    .json_slider .slick-next::before {
        margin-right: 4px;
        transform: rotate(45deg);
    }

    .json_slider .slick-arrow.slick-hidden {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .json_slider .slick-arrow {
        transition: none;
    }
}