/* Related projects share one horizontal, touch-scrollable catalogue row. */
.other-projects .project-covers.related-carousel{
 /* Keep the original seven-thumbnail desktop scale, on a row capped at 1600px. */
 --related-visible:7;
 --related-gap:min(0.5vw,8px);
 display:flex!important;
 flex-wrap:nowrap!important;
 align-items:flex-start;
 gap:var(--related-gap)!important;
 box-sizing:border-box;
 width:100%;
 max-width:100%;
 margin:0;
 padding:0;
 overflow-x:auto;
 overflow-y:hidden;
 overscroll-behavior-x:contain;
 touch-action:pan-x pan-y;
 -webkit-overflow-scrolling:touch;
 scroll-behavior:auto!important;
 scroll-snap-type:x mandatory;
 scrollbar-width:none;
}
.other-projects .project-covers.related-carousel::-webkit-scrollbar{display:none;}
.other-projects .project-covers.related-carousel.is-animating{scroll-snap-type:none!important;}
.other-projects .project-covers.related-carousel>.project-cover{
 display:block!important;
 box-sizing:border-box;
 flex:0 0 calc((100% - var(--related-gap) * (var(--related-visible) - 1)) / var(--related-visible));
 width:calc((100% - var(--related-gap) * (var(--related-visible) - 1)) / var(--related-visible))!important;
 min-width:0;
 max-width:none;
 float:none!important;
 clear:none!important;
 margin:0!important;
 scroll-snap-align:start;
 animation:none!important;
 transition:none!important;
 transform:none!important;
}
.other-projects .project-covers.related-carousel:focus-visible{outline:2px solid #111;outline-offset:4px;}
html[data-dark-project] .other-projects .project-covers.related-carousel:focus-visible{outline-color:#f5f5f5;}
@media(max-width:932px){.other-projects .project-covers.related-carousel{--related-visible:3;--related-gap:8px;}}
@media(prefers-reduced-motion:reduce){.other-projects .project-covers.related-carousel{scroll-behavior:auto!important;}}