/* ── Card Carousel – Front-end Styles v2.0.1 ── */

.cc-instance {
    /* responsive cards-per-view: explicit count per device tier */
    --cc-cards-desktop:     3;
    --cc-cards-laptop:      3;
    --cc-cards-tablet:      2;
    --cc-cards-mobile:      1;
    --cc-visible:           var(--cc-cards-desktop);

    /* layout */
    --cc-wrap-bg:           transparent;
    --cc-overlay-ratio:     3/4;
    --cc-card-ratio:        3/4;
    --cc-overlay-color:     #000000;
    --cc-overlay-opacity:   0.55;
    --cc-overlay-image:     linear-gradient(to top, var(--cc-overlay-color) 0%, transparent 70%);
    --cc-card-gap-desktop:  10px;
    --cc-card-gap-laptop:   10px;
    --cc-card-gap-tablet:   10px;
    --cc-card-gap-mobile:   10px;
    --cc-card-gap:          var(--cc-card-gap-desktop);
    --cc-step-gap:          0px;   /* 0 = padding gap model (default); set by .cc-edge for flush edges */
    /* nav-bar margins (top/bottom placement only) */
    --cc-nav-mt-desktop:    0px;
    --cc-nav-mb-desktop:    0px;
    --cc-nav-mt-laptop:     0px;
    --cc-nav-mb-laptop:     0px;
    --cc-nav-mt-tablet:     0px;
    --cc-nav-mb-tablet:     0px;
    --cc-nav-mt-mobile:     0px;
    --cc-nav-mb-mobile:     0px;
    --cc-nav-mt:            var(--cc-nav-mt-desktop);
    --cc-nav-mb:            var(--cc-nav-mb-desktop);
    --cc-nav-ml-desktop:    0px;
    --cc-nav-ml-laptop:     0px;
    --cc-nav-ml-tablet:     0px;
    --cc-nav-ml-mobile:     0px;
    --cc-nav-ml:            var(--cc-nav-ml-desktop);
    --cc-card-min-h:        0px;
    --cc-highlight-scale:   1.05;
    /* card */
    --cc-card-bg:           #00495c;
    --cc-card-border-color: transparent;
    --cc-card-border-width: 0px;
    --cc-card-radius:       10px;
    --cc-card-hover-bg:           #00495c;
    --cc-card-hover-border-color: transparent;
    --cc-card-hover-border-width: 0px;
    --cc-card-hover-radius:       10px;
    --cc-card-hover-shadow:       0px 10px 30px 0px rgba(0,0,0,.18);
    --cc-card-hover-scale:        1;
    --cc-vp-room:                 26px;
    --cc-card-w:                  100%;
    --cc-card-min-w:              0px;
    --cc-card-max-w:              none;
    --cc-card-h:                  100%;
    --cc-card-max-h:              none;
    /* per-side per-device padding (defaults) */
    --cc-card-pt-desktop:   20px; --cc-card-pr-desktop: 20px; --cc-card-pb-desktop: 20px; --cc-card-pl-desktop: 20px;
    --cc-card-pt-laptop:    20px; --cc-card-pr-laptop:  20px; --cc-card-pb-laptop:  20px; --cc-card-pl-laptop:  20px;
    --cc-card-pt-tablet:    20px; --cc-card-pr-tablet:  20px; --cc-card-pb-tablet:  20px; --cc-card-pl-tablet:  20px;
    --cc-card-pt-mobile:    20px; --cc-card-pr-mobile:  20px; --cc-card-pb-mobile:  20px; --cc-card-pl-mobile:  20px;
    --cc-card-pt:           var(--cc-card-pt-desktop);
    --cc-card-pr:           var(--cc-card-pr-desktop);
    --cc-card-pb:           var(--cc-card-pb-desktop);
    --cc-card-pl:           var(--cc-card-pl-desktop);
    /* image */
    --cc-img-height:        200px;
    --cc-img-radius:        10px;
    --cc-img-fit:           cover;
    --cc-img-pos:           center top;
    --cc-img-border-width:  0px;
    --cc-img-border-color:  transparent;
    --cc-img-pad:           0px;
    /* title */
    --cc-title-color:       #ffffff;
    --cc-title-size:        18px;
    --cc-title-weight:      700;
    --cc-title-align:       left;
    --cc-title-transform:   none;
    --cc-title-style:       normal;
    --cc-title-lh:          1.3;
    --cc-title-ls:          0px;
    --cc-title-border-width:0px;
    --cc-title-border-color:transparent;
    --cc-title-border-radius:0px;
    --cc-title-pad:         0px;
    /* text */
    --cc-text-color:        #ffffff;
    --cc-text-size:         14px;
    --cc-text-weight:       400;
    --cc-text-align:        left;
    --cc-text-transform:    none;
    --cc-text-style:        normal;
    --cc-text-lh:           1.5;
    --cc-text-ls:           0px;
    --cc-text-border-width: 0px;
    --cc-text-border-color: transparent;
    --cc-text-border-radius:0px;
    --cc-text-pad:          0px;
    /* testimonial name (v2.4.1) */
    --cc-tname-color:       #ffffff;
    --cc-tname-size:        14px;
    --cc-tname-weight:      700;
    --cc-tname-align:       left;
    --cc-tname-transform:   none;
    --cc-tname-style:       normal;
    --cc-tname-lh:          1.3;
    --cc-tname-ls:          0px;
    --cc-tname-border-width:0px;
    --cc-tname-border-color:transparent;
    --cc-tname-border-radius:0px;
    --cc-tname-pad:         0px;
    --cc-tname-mt:          10px;
    --cc-readmore-color:    #ffd166;
    --cc-readmore-pad:      0px;
    --cc-readmore-mt:       6px;
    --cc-readmore-ml:       0;
    --cc-readmore-mr:       auto;
    /* nav */
    --cc-nav-bg:            #292929;
    --cc-nav-hover-bg:      #f0f0f0;
    --cc-nav-icon-color:    #ffffff;
    --cc-nav-hover-icon-color: #292929;
    --cc-nav-size:          45px;
    --cc-nav-icon-size:     16px;
    --cc-nav-radius:        50%;
    --cc-nav-border-width:  0px;
    --cc-nav-border-color:  transparent;
    /* button */
    --cc-btn-bg:            #f55f02;
    --cc-btn-color:         #ffffff;
    --cc-btn-radius:        6px;
    --cc-btn-font-size:     14px;
    --cc-btn-font-weight:   600;
    --cc-btn-pad-v:         10px;
    --cc-btn-pad-h:         20px;
    --cc-btn-border-width:  0px;
    --cc-btn-border-color:  transparent;

    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.cc-instance *,
.cc-instance *::before,
.cc-instance *::after { box-sizing: border-box; }

/* ── Wrapper ── */
.cc-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--cc-wrap-bg);
    border-radius: var(--cc-card-radius);
}
.cc-wrapper--top,
.cc-wrapper--bottom { display: block; }

/* Viewport: clips horizontal travel, vertical padding lets the scaled /
   shadowed centre card breathe instead of being cut off. */
.cc-viewport {
    flex: 1;
    overflow: hidden;
    padding: 26px 0;
    margin: -26px 0;
    min-width: 0;
}
/* When a hover shadow or grow is active, widen the clip region (vertically by the
   shadow size, horizontally up to the card gap) so the effect fades out instead
   of being cut off at the carousel edges. Horizontal room is capped to stay
   within typical page gutters and only reveals the empty inter-card gap. */
.cc-hover-shadow .cc-viewport,
.cc-hover-grow .cc-viewport {
    padding: var(--cc-vp-room, 26px) min(var(--cc-card-gap), 40px);
    margin:  calc(-1 * var(--cc-vp-room, 26px)) calc(-1 * min(var(--cc-card-gap), 40px));
}

.cc-wrapper--sides .cc-viewport { order: 2; }
.cc-wrapper--sides .cc-prev     { order: 1; }
.cc-wrapper--sides .cc-next     { order: 3; }

/* ── Nav bar (top/bottom) ── */
.cc-nav-bar { display: flex; justify-content: center; gap: 10px; margin-top: var(--cc-nav-mt); margin-bottom: var(--cc-nav-mb); margin-left: var(--cc-nav-ml); }
.cc-nav-bar--top    { margin-bottom: 12px; }
.cc-nav-bar--bottom { margin-top: 12px; }
.cc-nav-bar--align-left   { justify-content: flex-start; }
.cc-nav-bar--align-center { justify-content: center; }
.cc-nav-bar--align-right  { justify-content: flex-end; }

/* ── Track ── */
.cc-track {
    display: flex;
    align-items: stretch;     /* equal-height cards */
}
.cc-track.cc-transitioning { transition: transform .5s ease; }

/* ── Slide ── (no overflow clipping — that was eating the centre border) */
.cc-slide {
    flex: 0 0 calc((100% - (var(--cc-visible) - 1) * var(--cc-step-gap)) / var(--cc-visible));
    width:        calc((100% - (var(--cc-visible) - 1) * var(--cc-step-gap)) / var(--cc-visible));
    padding: var(--cc-card-gap);
    display: flex;
    position: relative;
    z-index: 1;
    isolation: isolate;   /* own stacking context — helps the active card's
                             transform stay crisp on its own compositor layer */
}

/* ── Edge-to-edge alignment (v2.4.4) ──
   Default (no .cc-edge): --cc-step-gap is 0, so slide width = 100%/visible and
   the gap is the slide's own padding (gap between cards = 2×gap, plus a gap
   inset on the outer edges). With .cc-edge the inter-card gap moves to a real
   flex gap on the track and the outer slide padding is dropped, so the first
   and last visible cards sit flush with the carousel edges while the gap
   between cards is preserved. Cards widen to absorb the freed outer gaps. */
.cc-edge { --cc-step-gap: calc(2 * var(--cc-card-gap)); }
.cc-edge .cc-track { column-gap: calc(2 * var(--cc-card-gap)); }
.cc-edge .cc-slide { padding-left: 0; padding-right: 0; }
.cc-slide.cc-active { z-index: 2; }

/* ── Card ── */
.cc-card {
    background:    var(--cc-card-bg);
    border:        var(--cc-card-border-width) solid var(--cc-card-border-color);
    border-radius: var(--cc-card-radius);
    padding:       var(--cc-card-pt) var(--cc-card-pr) var(--cc-card-pb) var(--cc-card-pl);
    display: flex;
    flex-direction: column;
    /* Card size — default to fill the slide (100%). Width/height controls below
       override these vars when set in the admin. */
    width:      var(--cc-card-w, 100%);
    min-width:  var(--cc-card-min-w, 0px);
    max-width:  var(--cc-card-max-w, none);
    height:     var(--cc-card-h, 100%);
    min-height: var(--cc-card-min-h);
    max-height: var(--cc-card-max-h, none);
    /* Per-device image focal X/Y + zoom (desktop tier). Set on the card so both
       the foreground image and the background image read the same values.   */
    --cc-img-x:    var(--cc-img-x-desktop, 50%);
    --cc-img-y:    var(--cc-img-y-desktop, 50%);
    --cc-img-zoom: var(--cc-img-zoom-desktop, 100);
    transition: transform .5s ease, box-shadow .5s ease;
    text-decoration: none;
    cursor: default;
    color: inherit;
    font-family: inherit;
}
a.cc-card { cursor: pointer; }
a.cc-card:hover { text-decoration: none; }

/* ── Image media area ── */
.cc-card-media {
    /* flex: 0 0 auto pins this to its natural height. Without it, when the
       text container grows (Read More) the flex column can shrink the media
       area, distorting the image (width stays 100% but height squashes).   */
    flex: 0 0 auto;
    padding-left:  var(--cc-img-pad);
    padding-right: var(--cc-img-pad);
    overflow: hidden;
}
@media (max-width: 1439px) {
    .cc-card {
        --cc-img-x:    var(--cc-img-x-laptop, 50%);
        --cc-img-y:    var(--cc-img-y-laptop, 50%);
        --cc-img-zoom: var(--cc-img-zoom-laptop, 100);
    }
}
@media (max-width: 1024px) {
    .cc-card {
        --cc-img-x:    var(--cc-img-x-tablet, 50%);
        --cc-img-y:    var(--cc-img-y-tablet, 50%);
        --cc-img-zoom: var(--cc-img-zoom-tablet, 100);
    }
}
@media (max-width: 640px) {
    .cc-card {
        --cc-img-x:    var(--cc-img-x-mobile, 50%);
        --cc-img-y:    var(--cc-img-y-mobile, 50%);
        --cc-img-zoom: var(--cc-img-zoom-mobile, 100);
    }
}
.cc-card-media--bleed {
    margin: calc(-1 * var(--cc-card-pt)) calc(-1 * var(--cc-card-pr)) var(--cc-card-pb) calc(-1 * var(--cc-card-pl));
    border-top-left-radius:  var(--cc-card-radius);
    border-top-right-radius: var(--cc-card-radius);
}
.cc-card-media img {
    width: 100%;
    height:     var(--cc-img-height);
    min-height: var(--cc-img-height);
    max-height: var(--cc-img-height);
    display: block;
    object-fit:      var(--cc-img-fit);
    object-position: var(--cc-img-x) var(--cc-img-y);
    transform: scale(calc(var(--cc-img-zoom) / 100));
    transform-origin: var(--cc-img-x) var(--cc-img-y);
    border-radius: var(--cc-img-radius);
    border: var(--cc-img-border-width) solid var(--cc-img-border-color);
}

/* ── Title ── */
.cc-card-title {
    color:          var(--cc-title-color);
    font-size:      var(--cc-title-size);
    font-weight:    var(--cc-title-weight);
    text-align:     var(--cc-title-align);
    text-transform: var(--cc-title-transform);
    font-style:     var(--cc-title-style);
    line-height:    var(--cc-title-lh);
    letter-spacing: var(--cc-title-ls);
    border: var(--cc-title-border-width) solid var(--cc-title-border-color);
    border-radius:  var(--cc-title-border-radius);
    padding:        var(--cc-title-pad);
    margin: 12px 0 8px;
    font-family: inherit;
}

/* ── Body text ── */
.cc-card-text {
    margin: 0 0 4px;
    border: var(--cc-text-border-width) solid var(--cc-text-border-color);
    border-radius: var(--cc-text-border-radius);
    padding:       var(--cc-text-pad);
    flex-grow: 1;
}

/* ── Content wrapper (vertical alignment for title + text + button) ── */
.cc-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cc-card-content--top    { justify-content: flex-start; }
.cc-card-content--center { justify-content: center;     }
.cc-card-content--bottom { justify-content: flex-end;   }
/* Preserve the old "text fills, button sticks to bottom" behaviour only for
   the top alignment. For centred and bottom alignments the title+text+button
   group is packed together with no growing.                                  */
.cc-card-content--top    .cc-card-text { flex-grow: 1; }
.cc-card-content--center .cc-card-text { flex-grow: 0; }
.cc-card-content--bottom .cc-card-text { flex-grow: 0; }
.cc-card-text .cc-text {
    color:          var(--cc-text-color);
    font-size:      var(--cc-text-size);
    font-weight:    var(--cc-text-weight);
    text-align:     var(--cc-text-align);
    text-transform: var(--cc-text-transform);
    font-style:     var(--cc-text-style);
    line-height:    var(--cc-text-lh);
    letter-spacing: var(--cc-text-ls);
    margin: 0;
    font-family: inherit;
}
.cc-text--full[hidden] { display: none; }

.cc-readmore {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--cc-readmore-mt, 6px);
    margin-left: var(--cc-readmore-ml, 0);
    margin-right: var(--cc-readmore-mr, auto);
    padding: var(--cc-readmore-pad, 0);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cc-readmore-color);
    font-size: var(--cc-text-size);
    font-weight: 600;
    text-decoration: underline;
    font-family: inherit;
}
.cc-readmore:hover { opacity: .85; }

/* In overlay (text-over-image) layout the card height normally comes from the
   aspect ratio. When an explicit Card Height is set, let it win. */
.cc-fixed-h .cc-card--overlay { aspect-ratio: auto; height: var(--cc-card-h, 100%); }

/* "Portrait / Landscape" height mode (v2.4.7): the card height scales with its
   width via aspect-ratio — fully responsive across screen sizes, like v1.
   Scoped to non-overlay cards (overlay has its own ratio control). */
.cc-ratio .cc-card:not(.cc-card--overlay) {
    aspect-ratio: var(--cc-card-ratio, 3/4);
    height: auto;
    min-height: 0;
}

/* ── Text-over-image (overlay) layout ── */
.cc-card--overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--cc-overlay-ratio, 3/4);
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.cc-card--overlay .cc-card-media {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    height: 100%;
}
.cc-card--overlay .cc-card-media img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
}
.cc-card--overlay .cc-card-content {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--cc-card-pt) var(--cc-card-pr) var(--cc-card-pb) var(--cc-card-pl);
}
/* In overlay mode body text shouldn't stretch to push the button away */
.cc-card--overlay .cc-card-content .cc-card-text { flex-grow: 0; }

/* Universal image overlay — tints background images (any layout) and the
   foreground image in overlay layout. Driven by --cc-overlay-* vars. */
.cc-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--cc-overlay-image);
    opacity: var(--cc-overlay-opacity);
}
.cc-card--overlay .cc-card-overlay { border-radius: 0; }

/* Cards carrying a per-card background image: establish a stacking context so
   the overlay sits over the background but under the content/foreground. */
.cc-card--has-bg { position: relative; overflow: hidden; }
.cc-card--has-bg > .cc-card-media,
.cc-card--has-bg > .cc-card-content,
.cc-card--has-bg > .cc-card-testimonial { position: relative; z-index: 2; }

/* Background image (v2.4.4): a real <img> sharing the card's --cc-img-* focal
   point + zoom, so the background behaves exactly like the foreground image. */
.cc-card-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cc-img-x) var(--cc-img-y);
    transform: scale(calc(var(--cc-img-zoom) / 100));
    transform-origin: var(--cc-img-x) var(--cc-img-y);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
/* In stacked layout the overlay sits above the card background image (z-index 0
   of the card itself) but below media/content (z-index 2). */

/* ── Testimonial name (v2.4.1) — pinned to the bottom of the card ── */
.cc-card-testimonial {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin-top: var(--cc-tname-mt);
}
/* Stacked: card padding already insets it; overlay: give it the card padding. */
.cc-card--overlay .cc-card-testimonial {
    padding: 0 var(--cc-card-pr) var(--cc-card-pb) var(--cc-card-pl);
}
.cc-card--overlay.cc-card--testimonial .cc-card-content { padding-bottom: 0; }
.cc-testimonial-name {
    display: block;
    color:          var(--cc-tname-color);
    font-size:      var(--cc-tname-size);
    font-weight:    var(--cc-tname-weight);
    text-align:     var(--cc-tname-align);
    text-transform: var(--cc-tname-transform);
    font-style:     var(--cc-tname-style);
    line-height:    var(--cc-tname-lh);
    letter-spacing: var(--cc-tname-ls);
    border: var(--cc-tname-border-width) solid var(--cc-tname-border-color);
    border-radius:  var(--cc-tname-border-radius);
    padding:        var(--cc-tname-pad);
    font-family: inherit;
}

/* ── Button ── */
.cc-card-btn-wrap { margin-top: 14px; }
.cc-card-btn-wrap--left   { text-align: left; }
.cc-card-btn-wrap--center { text-align: center; }
.cc-card-btn-wrap--right  { text-align: right; }

.cc-card-btn {
    display: inline-block;
    background:    var(--cc-btn-bg);
    color:         var(--cc-btn-color);
    border:        var(--cc-btn-border-width) solid var(--cc-btn-border-color);
    border-radius: var(--cc-btn-radius);
    font-size:     var(--cc-btn-font-size);
    font-weight:   var(--cc-btn-font-weight);
    padding:       var(--cc-btn-pad-v) var(--cc-btn-pad-h);
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    transition: opacity .2s;
    font-family: inherit;
}
.cc-card-btn:hover { opacity: .85; text-decoration: none; color: var(--cc-btn-color); }

/* ── Centre (active) card highlight ──
   v2.0.6: Back to transform: scale (uniform clean zoom from centre, the
   original look). Crispness mitigations stacked on it:
     • will-change: transform  → active card gets its own compositor layer
     • backface-visibility: hidden  → forces hardware compositing
     • isolation: isolate on .cc-slide  → own stacking context
     • removed will-change from .cc-track  → cards aren't baked into a
       shared track-wide GPU bitmap (the main culprit for prior blur)    */
.cc-card { transition: transform .4s ease, box-shadow .4s ease, background-color .3s ease, border-color .3s ease, border-width .3s ease, border-radius .3s ease; }

/* ── Card hover effects (v2.4.2) — gated by .cc-hover-fx / .cc-hover-shadow on the instance ── */
.cc-hover-fx .cc-card:hover {
    background-color: var(--cc-card-hover-bg);
    border-color:     var(--cc-card-hover-border-color);
    border-width:     var(--cc-card-hover-border-width);
    border-radius:    var(--cc-card-hover-radius);
}
.cc-hover-shadow .cc-card:hover { box-shadow: var(--cc-card-hover-shadow); }

.cc-slide.cc-active .cc-card {
    transform: scale(var(--cc-highlight-scale));
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cc-instance.cc-highlight-shadow .cc-slide.cc-active .cc-card {
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
/* Single-card mode: no scale (would spill / clip) */
.cc-instance.cc-single .cc-slide.cc-active .cc-card { transform: none; }

/* Grow / expand on hover (v2.4.3) — placed after the centre-highlight rule so a
   hovered active card grows to the hover scale. */
.cc-hover-grow .cc-card:hover { transform: scale(var(--cc-card-hover-scale)); }

/* ── Nav buttons ── */
.cc-btn {
    background:    var(--cc-nav-bg);
    border:        var(--cc-nav-border-width) solid var(--cc-nav-border-color);
    width:         var(--cc-nav-size);
    height:        var(--cc-nav-size);
    border-radius: var(--cc-nav-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .3s;
    color: var(--cc-nav-icon-color);
}
.cc-btn:hover { background: var(--cc-nav-hover-bg); }
.cc-btn svg { width: var(--cc-nav-icon-size, 16px); height: var(--cc-nav-icon-size, 16px); }
.cc-btn svg path,
.cc-btn svg polyline,
.cc-btn svg polygon { stroke: var(--cc-nav-icon-color); fill: none; transition: stroke .3s; }
.cc-btn svg polygon { fill: var(--cc-nav-icon-color); stroke: none; }
.cc-btn:hover svg path,
.cc-btn:hover svg polyline { stroke: var(--cc-nav-hover-icon-color); }
.cc-btn:hover svg polygon  { fill: var(--cc-nav-hover-icon-color); }

/* ── Responsive: each tier reads its own per-device vars ── */
@media (max-width: 1439px) {
    .cc-instance {
        --cc-visible:    var(--cc-cards-laptop);
        --cc-card-gap:   var(--cc-card-gap-laptop);
        --cc-nav-mt:     var(--cc-nav-mt-laptop);
        --cc-nav-mb:     var(--cc-nav-mb-laptop);
        --cc-nav-ml:     var(--cc-nav-ml-laptop);
        --cc-card-pt:    var(--cc-card-pt-laptop);
        --cc-card-pr:    var(--cc-card-pr-laptop);
        --cc-card-pb:    var(--cc-card-pb-laptop);
        --cc-card-pl:    var(--cc-card-pl-laptop);
    }
}
@media (max-width: 1024px) {
    .cc-instance {
        --cc-visible:    var(--cc-cards-tablet);
        --cc-card-gap:   var(--cc-card-gap-tablet);
        --cc-nav-mt:     var(--cc-nav-mt-tablet);
        --cc-nav-mb:     var(--cc-nav-mb-tablet);
        --cc-nav-ml:     var(--cc-nav-ml-tablet);
        --cc-card-pt:    var(--cc-card-pt-tablet);
        --cc-card-pr:    var(--cc-card-pr-tablet);
        --cc-card-pb:    var(--cc-card-pb-tablet);
        --cc-card-pl:    var(--cc-card-pl-tablet);
    }
}
@media (max-width: 640px) {
    .cc-instance {
        --cc-visible:    var(--cc-cards-mobile);
        --cc-card-gap:   var(--cc-card-gap-mobile);
        --cc-nav-mt:     var(--cc-nav-mt-mobile);
        --cc-nav-mb:     var(--cc-nav-mb-mobile);
        --cc-nav-ml:     var(--cc-nav-ml-mobile);
        --cc-card-pt:    var(--cc-card-pt-mobile);
        --cc-card-pr:    var(--cc-card-pr-mobile);
        --cc-card-pb:    var(--cc-card-pb-mobile);
        --cc-card-pl:    var(--cc-card-pl-mobile);
    }
    .cc-wrapper--sides { flex-wrap: wrap; justify-content: center; }
    .cc-wrapper--sides .cc-viewport { order: 1; flex: 0 0 100%; }
    .cc-wrapper--sides .cc-prev { order: 2; }
    .cc-wrapper--sides .cc-next { order: 3; }
    .cc-btn { width: 38px; height: 38px; }
}