.mere-rpc {
    --mere-rpc-bg: #9b0100;
    --mere-rpc-text: #ffffff;
    --mere-rpc-card-bg: #ffffff;
    --mere-rpc-card-text: #222222;
    --mere-rpc-card-width: 180px;
    --mere-rpc-columns: 7;
    --mere-rpc-gap: 10px;
    --mere-rpc-title-size: 11px;
    --mere-rpc-excerpt-size: 10px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 38px;
    background: var(--mere-rpc-bg);
    color: var(--mere-rpc-text);
    overflow: hidden;
}

.mere-rpc-inner {
    width: min(1500px, calc(100% - 36px));
    margin: 0 auto;
    padding: 22px 0 24px;
}

.mere-rpc-header { margin-bottom: 11px; }

.mere-rpc-heading {
    margin: 0;
    color: var(--mere-rpc-text) !important;
    font-size: clamp(17px, 1.25vw, 20px);
    line-height: 1.15;
}

.mere-rpc-shell {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: stretch;
}

.mere-rpc-track {
    display: flex;
    gap: var(--mere-rpc-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-inline: contain;
    padding: 1px 0 5px;
}

.mere-rpc-track::-webkit-scrollbar { display: none; }

.mere-rpc-card {
    flex: 0 0 calc((100% - ((var(--mere-rpc-columns) - 1) * var(--mere-rpc-gap))) / var(--mere-rpc-columns));
    width: calc((100% - ((var(--mere-rpc-columns) - 1) * var(--mere-rpc-gap))) / var(--mere-rpc-columns));
    min-width: 0;
    background: var(--mere-rpc-card-bg);
    color: var(--mere-rpc-card-text);
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 5px 15px rgba(0,0,0,.17);
}

.mere-rpc-link {
    display: block;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
}

.mere-rpc-image {
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,.08);
}

.mere-rpc-ratio-16-9 { aspect-ratio: 16 / 9; }
.mere-rpc-ratio-4-3 { aspect-ratio: 4 / 3; }
.mere-rpc-ratio-1-1 { aspect-ratio: 1 / 1; }

.mere-rpc-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.mere-rpc-link:hover .mere-rpc-image img,
.mere-rpc-link:focus-visible .mere-rpc-image img { transform: scale(1.03); }

.mere-rpc-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}

.mere-rpc-content { padding: 7px 8px 8px; }

.mere-rpc .mere-rpc-title {
    margin: 0;
    color: var(--mere-rpc-card-text) !important;
    font-size: var(--mere-rpc-title-size) !important;
    line-height: 1.25;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5em;
    max-height: 2.5em;
}

.mere-rpc-excerpt {
    margin: 6px 0 0;
    color: var(--mere-rpc-card-text);
    opacity: .82;
    font-size: var(--mere-rpc-excerpt-size);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.mere-rpc-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 34px;
    min-width: 34px;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0,0,0,.10);
    color: var(--mere-rpc-text);
    cursor: pointer;
    opacity: .92;
    transition: opacity .2s ease, background-color .2s ease;
}

.mere-rpc-arrow:hover,
.mere-rpc-arrow:focus-visible {
    opacity: 1;
    background: rgba(0,0,0,.23);
    outline: none;
}

.mere-rpc-arrow:focus-visible { box-shadow: inset 0 0 0 2px currentColor; }

.mere-rpc-arrow span {
    display: block;
    width: 16px;
    height: 16px;
    border-top: 4px solid currentColor;
    border-right: 4px solid currentColor;
}

.mere-rpc-prev span { transform: rotate(-135deg); }
.mere-rpc-next span { transform: rotate(45deg); }

.mere-rpc.is-static .mere-rpc-arrow { visibility: hidden; pointer-events: none; }
.mere-rpc.is-static .mere-rpc-track { justify-content: flex-start; overflow: hidden; }

@media (max-width: 1180px) {
    .mere-rpc { --mere-rpc-columns: 6; }
}

@media (max-width: 900px) {
    .mere-rpc { --mere-rpc-columns: 4; }
}

@media (max-width: 620px) {
    .mere-rpc { --mere-rpc-columns: 1.35; --mere-rpc-gap: 9px; }
    .mere-rpc-inner { width: min(100%, calc(100% - 20px)); padding: 19px 0 21px; }
    .mere-rpc-shell { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 5px; }
    .mere-rpc-arrow { width: 28px; min-width: 28px; }
    .mere-rpc-arrow span { width: 13px; height: 13px; border-width: 3px 3px 0 0; }
    .mere-rpc .mere-rpc-title { font-size: var(--mere-rpc-title-size) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mere-rpc-track { scroll-behavior: auto; }
    .mere-rpc-image img,
    .mere-rpc-arrow { transition: none; }
}