{{! Projects (ADR 0062): the Articles element's cards (posts/template.html, "requires": ["posts"]) with a project's details; each card names its categories (data-sv-cats) so the category buttons filter at once (view.js), and the buttons stay links without the script. }}
<div {{@attrs}}><div class="sv-posts sv-posts--columns-{{columns}} sv-posts--look-{{look}}">{{#hasFilters}}<nav class="sv-posts__filters" aria-label="{{filtersLabel}}"{{^limited}} data-sv-project-filters{{/limited}}>{{#filters}}<a class="sv-posts__filter" href="{{url}}" data-sv-filter="{{slug}}"{{#current}} aria-current="page"{{/current}}>{{name}}</a>{{/filters}}</nav>{{/hasFilters}}{{#hasItems}}{{#overflow}}<div class="sv-carousel sv-carousel--nav-{{carouselNav}}" data-sv-carousel><div class="sv-carousel__track">{{/overflow}}{{^overflow}}<div class="sv-posts__grid">{{/overflow}}{{#items}}<article class="sv-service-card sv-service-card--look-{{look}}{{#shape}} sv-service-card--shape-{{shape}}{{/shape}}{{#titleSize}} sv-service-card--title-size-{{titleSize}}{{/titleSize}} sv-posts__item sv-projects__item{{^turns}}{{#style}} sv-card-{{style}}{{#styleCustom}} sv-card-custom{{/styleCustom}}{{/style}}{{/turns}}{{#turns}} sv-card-turns{{/turns}} sv-round-{{corners}}{{#hover}} sv-cardhover-{{hover}}{{/hover}}"{{^turns}}{{#styleCustom}} style="--sv-custom-card:{{styleCustom}}"{{/styleCustom}}{{/turns}} data-sv-cats="{{cats}}"><div class="sv-service-card__media">{{^slides}}{{#image.url}}<img class="sv-service-card__photo" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} loading="lazy" decoding="async">{{/image.url}}{{^image.url}}<span class="sv-posts__nophoto" aria-hidden="true"></span>{{/image.url}}{{/slides}}{{#slides}}<div class="sv-projects__slides" data-sv-slides>{{#images}}<img class="sv-service-card__photo sv-projects__slide" src="{{url}}" alt="{{alt}}"{{#width}} width="{{width}}" height="{{height}}"{{/width}} loading="lazy" decoding="async">{{/images}}<button type="button" class="sv-projects__arrow sv-projects__arrow--prev" aria-label="{{prevLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" class="sv-projects__arrow sv-projects__arrow--next" aria-label="{{nextLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6"/></svg></button></div>{{/slides}}</div><div class="sv-service-card__body"><p class="sv-posts__meta">{{#showCategory}}{{#category.name}}<span class="sv-posts__category">{{category.name}}</span>{{/category.name}}{{/showCategory}}{{#showClient}}{{#client}}<span>{{client}}</span>{{/client}}{{/showClient}}{{#showYear}}{{#year}}<span>{{year}}</span>{{/year}}{{/showYear}}{{#showLocation}}{{#location}}<span>{{location}}</span>{{/location}}{{/showLocation}}</p><h3 class="sv-service-card__title">{{title}}</h3>{{#showExcerpt}}{{#excerpt}}<p class="sv-service-card__text">{{excerpt}}</p>{{/excerpt}}{{/showExcerpt}}{{#showServices}}{{#hasServices}}<ul class="sv-projects__tags">{{#services}}<li>{{name}}</li>{{/services}}</ul>{{/hasServices}}{{/showServices}}{{#moreLabel}}<span class="sv-posts__more" aria-hidden="true">{{moreLabel}}</span>{{/moreLabel}}</div>{{#tiles}}<span class="sv-image__arrow sv-service-card__arrow" aria-hidden="true"></span>{{/tiles}}<a class="sv-service-card__link" href="{{url}}"><span class="sv-service-card__sr">{{title}}</span></a></article>{{/items}}{{^overflow}}</div>{{/overflow}}{{#overflow}}</div><button type="button" class="sv-carousel__arrow sv-carousel__arrow--prev" aria-label="{{prevLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" class="sv-carousel__arrow sv-carousel__arrow--next" aria-label="{{nextLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6"/></svg></button></div>{{/overflow}}{{/hasItems}}{{^hasItems}}{{#ready}}{{@placeholder projects}}{{/ready}}{{^ready}}{{@placeholder loading-projects}}{{/ready}}{{/hasItems}}</div></div>