.cklc_container {
    container: cklc/inline-size;
    width: 100%
}

.cklc_carosel {
    --cklc-desktop: 5;
    --cklc-tablet: 3;
    --cklc-mobile: 2;
    --cklc-per-view: var(--cklc-desktop);
    --cklc-gap: 22px;
    --cklc-height: 120px;
    --cklc-padding: 24px;
    --cklc-speed: 600ms;
    --cklc-bg: #fff;
    --cklc-accent: #1a905e;
    position: relative;
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #183c31;
    font-family: Arial, Helvetica, sans-serif
}

.cklc_carosel,
.cklc_carosel *,
.cklc_carosel *::before,
.cklc_carosel *::after {
    box-sizing: border-box
}

.cklc_carosel [hidden] {
    display: none !important
}

.cklc_viewport {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y
}

.cklc_track {
    display: flex;
    gap: var(--cklc-gap);
    transform: translate3d(0, 0, 0);
    transition: transform var(--cklc-speed) cubic-bezier(.22, .61, .36, 1);
    will-change: transform
}

.cklc_item {
    display: flex;
    flex: 0 0 calc((100% - (var(--cklc-per-view) - 1)*var(--cklc-gap))/var(--cklc-per-view));
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: calc(var(--cklc-height) + 2*var(--cklc-padding));
    padding: var(--cklc-padding);
    overflow: hidden;
    border: 1px solid rgb(7 81 65/.1);
    border-radius: 12px;
    background: var(--cklc-card, #fff);
    box-shadow: 0 6px 22px rgb(7 81 65/.06)
}

.cklc_link,
.cklc_logo_wrap {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center
}

.cklc_link {
    text-decoration: none;
    transition: transform .25s ease
}

.cklc_link:hover {
    transform: scale(1.035)
}

.cklc_image {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--cklc-height) !important;
    object-fit: contain !important
}

.cklc_grayscale .cklc_image {
    filter: grayscale(1);
    opacity: .72;
    transition: filter .25s ease, opacity .25s ease
}

.cklc_grayscale .cklc_item:hover .cklc_image,
.cklc_grayscale .cklc_item:focus-within .cklc_image {
    filter: none;
    opacity: 1
}

.cklc_controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px
}

.cklc_arrow,
.cklc_rotation,
.cklc_dot {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--cklc-accent);
    cursor: pointer;
    font-family: inherit
}

.cklc_arrow,
.cklc_rotation {
    width: 38px;
    height: 38px;
    border: 1px solid rgb(7 81 65/.12);
    border-radius: 50%;
    background: #fff;
    font-size: 19px;
    box-shadow: 0 3px 12px rgb(7 81 65/.08)
}

.cklc_rotation {
    font-size: 10px
}

.cklc_arrow:hover,
.cklc_rotation:hover {
    background: var(--cklc-accent);
    color: #fff
}

.cklc_arrow:disabled {
    opacity: .3;
    cursor: default
}

.cklc_dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px
}

.cklc_dot {
    width: 22px;
    height: 30px;
    padding: 0
}

.cklc_dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cklc-accent);
    opacity: .3;
    transition: transform .2s, opacity .2s
}

.cklc_dot[aria-current=true]::before {
    opacity: 1;
    transform: scale(1.45)
}

.cklc_carosel :is(a, button):focus-visible {
    outline: 3px solid #86cfef;
    outline-offset: 3px
}

.cklc_empty {
    display: grid;
    min-height: 130px;
    place-items: center;
    padding: 30px;
    border: 1px dashed #b7cbc4;
    border-radius: 12px;
    background: #f4faf7;
    text-align: center
}

.cklc_screen_reader {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

@container cklc (max-width:900px) {
    .cklc_carosel {
        --cklc-per-view: var(--cklc-tablet)
    }
}

@container cklc (max-width:560px) {
    .cklc_carosel {
        --cklc-per-view: var(--cklc-mobile);
        padding: 8px
    }

    .cklc_item {
        border-radius: 9px
    }

    .cklc_controls {
        margin-top: 9px
    }
}

@media(prefers-reduced-motion:reduce) {

    .cklc_track,
    .cklc_link,
    .cklc_image {
        transition: none !important
    }
}