.scs-slider-wrap {
    position: relative;
    width: 100%;
}

.scs-slider {
    --scs-gap: clamp(10px, 1.25vw, 24px);
    --scs-side: clamp(12px, 3.3vw, 64px);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    touch-action: pan-x pan-y;
    outline: none;
}

.scs-slider::-webkit-scrollbar { display: none; }
.scs-slider.is-dragging { cursor: grabbing; user-select: none; }
.scs-slider img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

.scs-track {
    display: flex;
    align-items: stretch;
    gap: var(--scs-gap);
    width: max-content;
    padding: 0 var(--scs-side);
}

.scs-panel {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1.86fr) minmax(0, 1fr);
    grid-template-areas:
        "one two three four"
        "one two five five";
    gap: var(--scs-gap);
    width: calc(100vw - (2 * var(--scs-side)));
    height: clamp(420px, 35.2vw, 690px);
    min-height: 0;
}

.scs-item { margin: 0; min-width: 0; min-height: 0; overflow: hidden; background: #f1f1f1; }
.scs-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scs-slot-1 { grid-area: one; }
.scs-slot-2 { grid-area: two; }
.scs-slot-3 { grid-area: three; }
.scs-slot-4 { grid-area: four; }
.scs-slot-5 { grid-area: five; }

/* Graceful layout for an incomplete final group. */
.scs-panel .scs-slot-1:last-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.scs-panel .scs-slot-2:last-child { grid-area: two / two / 3 / 5; }
.scs-panel .scs-slot-3:last-child { grid-column: 3 / 5; grid-row: 1 / 3; }
.scs-panel .scs-slot-4:last-child { grid-column: 4 / 5; grid-row: 1 / 3; }

.scs-nav {
    position: absolute;
    z-index: 5;
    top: 50%;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #171717;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
    -webkit-tap-highlight-color: transparent;
}

.scs-nav span {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-1px);
}

.scs-nav-prev { left: clamp(8px, 1.2vw, 18px); }
.scs-nav-next { right: clamp(8px, 1.2vw, 18px); }

.scs-nav:hover:not(:disabled) {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

.scs-nav:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.scs-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.scs-empty { padding: 18px; border: 1px dashed #c3c4c7; background: #fafafa; }

@media (max-width: 900px) {
    .scs-slider { --scs-side: 16px; --scs-gap: 10px; }
    .scs-panel {
        width: calc(100vw - 32px);
        height: clamp(350px, 82vw, 560px);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 1.55fr 1fr;
    }
    .scs-nav { width: 42px; height: 42px; }
    .scs-nav span { font-size: 32px; }
}

@media (max-width: 560px) {
    .scs-slider { --scs-side: 12px; --scs-gap: 7px; }
    .scs-panel {
        width: calc(100vw - 24px);
        height: clamp(300px, 96vw, 470px);
    }
    .scs-nav { width: 38px; height: 38px; }
    .scs-nav span { font-size: 29px; }
    .scs-nav-prev { left: 7px; }
    .scs-nav-next { right: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .scs-nav { transition: none; }
}