/* Related-content slider (inc/related.php). 3 cards visible on desktop, ~1.15 on mobile. All cards are in the HTML. */
.rel-slider{position:relative}
.rel-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:-8px 0 12px}
.rel-count{margin-right:auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.rel-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-outline-variant,#c9c6c0);background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer;transition:border-color .2s,opacity .2s}
.rel-btn:hover:not([disabled]){border-color:currentColor}
.rel-btn[disabled]{opacity:.3;cursor:default}
.rel-track{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rel-track::-webkit-scrollbar{display:none}
.rel-track>*{scroll-snap-align:start;min-width:0}
.rel-track:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (min-width:768px){
	.rel-track--lg{grid-auto-columns:calc((100% - 48px)/3)}
	.rel-track--px{grid-auto-columns:calc((100% - 2px)/3)}
}
@media (prefers-reduced-motion:reduce){.rel-track{scroll-behavior:auto}}