.riders-index { --card-accent: var(--ac-primary-color, #15aeef); padding: 48px 0 80px; }
.riders-index__section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.riders-index__eyebrow { display: block; margin: 0 0 9px; color: var(--ac-primary-color, #15aeef); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.riders-index__section { margin-top: 42px; }
.riders-index__section:first-child { margin-top: 0; }
.riders-index__section-heading { margin-bottom: 27px; padding-bottom: 20px; border-bottom: 1px solid #d6d6d6; }
.riders-index h1,
.riders-index h2 { margin: 0; color: #171717; font-size: clamp(27px, 3vw, 40px); font-weight: 800; letter-spacing: -.025em; }
.riders-index__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.riders-index__grid .content-card__media { aspect-ratio: 1; }
.riders-index__grid .content-card__body { padding: 15px; }
.riders-index__grid .content-card__meta { justify-content: start; }
.riders-index__load { margin: 28px auto 0; text-align: center; }
.riders-index__load button { padding: 12px 30px; border: 1px solid #bbb; border-radius: 4px; background: #fff; color: #222; font-weight: 800; cursor: pointer; }
.riders-index__load button:hover,
.riders-index__load button:focus { border-color: var(--card-accent, #15aeef); color: var(--card-accent, #15aeef); }
.riders-index__load button:disabled { cursor: wait; opacity: .6; }
.riders-index__load p { margin: 10px 0 0; color: #626262; }
@media (max-width: 767px) {
    .riders-index { padding: 28px 0 55px; }
    .riders-index__section-heading { align-items: start; flex-direction: column; gap: 12px; }
    .riders-index__section-heading > div { min-width: 0; }
    .riders-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riders-index__section { margin-top: 34px; }
}