.-ycwt-clients {
    padding: 66px 0 120px;
    border-radius:60px 60px 0 0;
    margin-top: -50px;
    background:white;
}

.clts-head {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-bottom:36px;
}

.clts-head span {
    flex:0 0 96px;
    width:96px;
    height: 3px;
    background: var(--uicolor);
}

.clts-head h1,
.clts-head h2,
.clts-head h3,
.clts-head div {
    min-width:0;
    margin:0;
    color:inherit;
    font-size:25px;
    line-height:1.2;
    font-weight:900;
    text-align:center;
    overflow-wrap:anywhere;
}

.clts-list {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 15px;
}

.clts-itm {
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 5px solid color-mix(in srgb,var(--Text-color) 35%,var(--background-color));
}

.clts-itm a {
    min-width:0;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
}

.clts-itm img {
    max-width: 100%;
    max-height: 140px;
    object-fit:contain;
    filter:grayscale(1) contrast(.92);
    opacity: .88;
    transition:filter var(--transition), opacity var(--transition), transform var(--transition);
}

.clts-itm strong {
    min-width:150px;
    min-height:72px;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 18px;
    color:#3c4144;
    font-size:25px;
    line-height:1.35;
    font-weight:900;
    text-align:center;
    overflow-wrap:anywhere;
}

.clts-itm a:focus-visible {
    outline:2px solid var(--uicolor);
    outline-offset:6px;
}

@media (hover:hover) and (pointer:fine) {
    .clts-itm:hover img {
        filter:none;
        opacity:1;
        transform: translateY(4px);
    }
}

@media (hover:none) {
    .clts-itm img {
        filter:none;
        opacity:1;
    }
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:1024px) {
    .-ycwt-clients {
        padding:58px 0 64px;
        border-start-start-radius:48px;
        border-start-end-radius:48px;
    }

    .clts-list {
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:30px;
    }

    .clts-itm {
        width:100%;
    }
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
    .-ycwt-clients {
        padding:44px 0 48px;
        border-start-start-radius:34px;
        border-start-end-radius:34px;
        margin-top:-32px;
    }

    .clts-head {
        gap:12px;
        margin-bottom:24px;
        padding-inline:4px;
    }

    .clts-head span {
        flex:1 1 58px;
        width:auto;
        max-width:58px;
    }

    .clts-head h1,
    .clts-head h2,
    .clts-head h3,
    .clts-head div {
        flex:0 1 auto;
        max-width:min(68vw, 360px);
        font-size:clamp(20px, 5.4vw, 22px);
        line-height:1.35;
    }

    .clts-list {
        display:flex;
        align-items:stretch;
        justify-content:flex-start;
        gap:12px;
        margin-inline:calc(var(--container-padding--value) * -1);
        padding:2px var(--container-padding--value) 6px;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x proximity;
        scroll-padding-inline:var(--container-padding--value);
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .clts-list::-webkit-scrollbar {
        display:none;
    }

    .clts-itm {
        flex:0 0 clamp(132px, 38vw, 154px);
        min-height:112px;
        padding:14px;
        border:1px solid var(--diver);
        border-radius:18px;
        background:var(--surface-color);
        box-shadow:0 10px 24px -22px rgba(2, 11, 26, .45);
        scroll-snap-align:start;
        scroll-snap-stop:normal;
    }

    .clts-itm a {
        width:100%;
        min-height:80px;
    }

    .clts-itm a:active img {
        transform:scale(.96);
    }

    .clts-itm img {
        width:100%;
        max-width:112px;
        max-height:72px;
        filter:none;
        opacity:1;
    }

    .clts-itm strong {
        min-width:0;
        min-height:80px;
        padding:0;
        font-size:18px;
        line-height:1.45;
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
    .-ycwt-clients {
        padding:40px 0 44px;
        border-start-start-radius:28px;
        border-start-end-radius:28px;
    }

    .clts-head {
        gap:10px;
        margin-bottom:20px;
    }

    .clts-head span {
        max-width:40px;
    }

    .clts-head h1,
    .clts-head h2,
    .clts-head h3,
    .clts-head div {
        max-width:72vw;
        font-size:19px;
    }

    .clts-list {
        gap:10px;
    }

    .clts-itm {
        flex-basis:126px;
        min-height:104px;
        padding:12px;
        border-radius:16px;
    }

    .clts-itm a,
    .clts-itm strong {
        min-height:76px;
    }

    .clts-itm img {
        max-width:102px;
        max-height:66px;
    }

    .clts-itm strong {
        font-size:16px;
    }
}