.rppr { margin-block: 2rem; --rppr-gap: 1rem; --rppr-columns: 1; }
.rppr-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rppr-heading h2 { margin-block: 0 1rem; }
.rppr-controls { display: flex; gap: .5rem; }
.rppr-controls[hidden] { display: none; }
.rppr-controls button { min-width: 44px; min-height: 44px; cursor: pointer; }
.rppr-controls button:disabled { opacity: .4; cursor: default; }
.rppr .rppr-list { display: flex; gap: var(--rppr-gap); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: .35rem .15rem 1rem; scroll-behavior: smooth; }
.rppr .rppr-card { flex: 0 0 calc((100% - (var(--rppr-columns) - 1) * var(--rppr-gap)) / var(--rppr-columns)); min-width: 0; scroll-snap-align: start; margin: 0; padding: 0; }
.rppr-card a { display: block; text-decoration: none; color: inherit; }
.rppr-image { aspect-ratio: 1; overflow: hidden; background: #f5f5f5; }
.rppr-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rppr-card h3 { font-size: 1rem; margin-block: .75rem .5rem; overflow-wrap: anywhere; }
.rppr :focus-visible { outline: 3px solid #125cc1; outline-offset: 3px; }
@media (min-width: 768px) { .rppr { --rppr-columns: 2; } }
@media (min-width: 1024px) { .rppr { --rppr-columns: 3; } }
@media (prefers-reduced-motion: reduce) { .rppr .rppr-list { scroll-behavior: auto; } }