Relevant content

The Relevant content module (M89): a section title, an optional filter row and a set of content cards — as a carousel (regular or wide), a list, a two- or three-column grid, or a three-column asymmetric grid — with a footer that loads more. Every grid stacks to one column on mobile.

Built withVisual Tag Button Carousel footer

Examples

Carousel

Type=Carousel: 4:5 cards in a horizontal, scroll-snapping track under the section title and its CTA, closed by the Carousel footer (Top border, Small) with the count and the arrows. The footer is hidden on mobile, where the cards are swiped.

<section class="kompan-relevant-content kompan-relevant-content_carousel" aria-labelledby="relevant-no-matter-who-you-are-we-are-ready-to-help">
  <div class="kompan-relevant-content__container">
    <div class="kompan-relevant-content__top">
      <div class="kompan-relevant-content__header">
        <h2 class="kompan-relevant-content__title" id="relevant-no-matter-who-you-are-we-are-ready-to-help">No matter who you are, we are ready to help</h2>
        <a class="kompan-button kompan-button_md" href="#">Find inspiration<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </div>
    </div>
    <div class="kompan-relevant-content__cards">
      <div class="kompan-relevant-content__track" tabindex="0" aria-label="No matter who you are, we are ready to help">
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/bb4a81fd245831de26b47bc1a62a43afd75ef3b9-1600x1066.jpg" alt="Children climbing the owl-shaped play tower"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Architects</a></h3></div>
      <p class="kompan-relevant-content__card-body">Solutions and references for your sector.</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See solutions<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/25daa91b33fe981b44036954c2670e6e82edc727-1600x1066.jpg" alt="Children queuing on a wide slide"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Parks & Recreation</a></h3></div>
      <p class="kompan-relevant-content__card-body">Solutions and references for your sector.</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See solutions<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/9a969aae62a5185f4db5ff973cf7eedc69619cc9-1000x667.jpg" alt="Two girls peeking through a wooden climbing wall"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Schools</a></h3></div>
      <p class="kompan-relevant-content__card-body">Solutions and references for your sector.</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See solutions<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/06f6f5def9acaa1a3e02c1d6504ef3ea1c776ef2-1600x748.jpg" alt="A girl at the top of a slide"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Preschools</a></h3></div>
      <p class="kompan-relevant-content__card-body">Solutions and references for your sector.</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See solutions<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/49d040d99874d92e901541340b7cf4f7ca7a6533-1600x1067.jpg" alt="A green climbing net seen from below"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Leisure</a></h3></div>
      <p class="kompan-relevant-content__card-body">Solutions and references for your sector.</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See solutions<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/ab9654ba02d9d75a5e993f6bda3fa882bd783bb0-1000x667.jpg" alt="A girl looking up through a climbing tube"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Housing</a></h3></div>
      <p class="kompan-relevant-content__card-body">Solutions and references for your sector.</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See solutions<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
      </div>
      <footer class="kompan-carousel-footer kompan-carousel-footer_bordered kompan-carousel-footer_sm">
        <p class="kompan-carousel-footer__info">6 industries</p>
        <div class="kompan-carousel-footer__controls">
          <button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
          <button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
        </div>
      </footer>
    </div>
  </div>
</section>

Carousel wide

Type=Carousel Wide: the same track with 5:4 cards at width-xs (384px).

<section class="kompan-relevant-content kompan-relevant-content_carousel-wide" aria-labelledby="relevant-explore-even-more-sites">
  <div class="kompan-relevant-content__container">
    <div class="kompan-relevant-content__top">
      <div class="kompan-relevant-content__header">
        <h2 class="kompan-relevant-content__title" id="relevant-explore-even-more-sites">Explore even more sites</h2>
      </div>
    </div>
    <div class="kompan-relevant-content__cards">
      <div class="kompan-relevant-content__track" tabindex="0" aria-label="Explore even more sites">
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_5x4 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/e7d61c10c15d5c8f19cc878f61e41840dcc9441c-1600x914.jpg" alt="The pirate-ship playground at Zetland Park"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Zetland Park, Scotland</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See the case<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_5x4 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/25daa91b33fe981b44036954c2670e6e82edc727-1600x1066.jpg" alt="Children queuing on a wide slide"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Buccaneer Bay, Australia</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See the case<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_5x4 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/bb4a81fd245831de26b47bc1a62a43afd75ef3b9-1600x1066.jpg" alt="Children climbing the owl-shaped play tower"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Lincoln Square Playground, Australia</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See the case<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_5x4 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/9a969aae62a5185f4db5ff973cf7eedc69619cc9-1000x667.jpg" alt="Two girls peeking through a wooden climbing wall"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">King’s Kindergarten, China</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See the case<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_5x4 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/49d040d99874d92e901541340b7cf4f7ca7a6533-1600x1067.jpg" alt="A green climbing net seen from below"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Dinosaur Playground, Sweden</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See the case<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_5x4 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/ab9654ba02d9d75a5e993f6bda3fa882bd783bb0-1000x667.jpg" alt="A girl looking up through a climbing tube"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Federal Hill Commons, USA</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    <div class="kompan-relevant-content__card-cta"><a class="kompan-button kompan-button_sm kompan-button_link-dark" href="#">See the case<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  </div>
</article>
      </div>
      <footer class="kompan-carousel-footer kompan-carousel-footer_bordered kompan-carousel-footer_sm">
        <p class="kompan-carousel-footer__info">6 sites</p>
        <div class="kompan-carousel-footer__controls">
          <button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
          <button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
        </div>
      </footer>
    </div>
  </div>
</section>

Two columns

Type=2 column: 16:9 cards, two per row, with a quick filter and the section footer. Stacks to one column on mobile.

<section class="kompan-relevant-content kompan-relevant-content_2col" aria-labelledby="relevant-explore-even-more-sites">
  <div class="kompan-relevant-content__container">
    <div class="kompan-relevant-content__top">
      <div class="kompan-relevant-content__header">
        <h2 class="kompan-relevant-content__title" id="relevant-explore-even-more-sites">Explore even more sites</h2>
      </div>
      <div class="kompan-relevant-content__filters" role="group" aria-label="Filter by"><button type="button" class="kompan-tag kompan-tag_sm kompan-tag_selected" aria-pressed="true">All</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Playgrounds</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Fitness</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Nature play</button></div>
    </div>
    <div class="kompan-relevant-content__cards">
      <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/e7d61c10c15d5c8f19cc878f61e41840dcc9441c-1600x914.jpg" alt="The pirate-ship playground at Zetland Park"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Zetland Park, Scotland</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
      <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/25daa91b33fe981b44036954c2670e6e82edc727-1600x1066.jpg" alt="Children queuing on a wide slide"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Buccaneer Bay, Australia</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
      <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/bb4a81fd245831de26b47bc1a62a43afd75ef3b9-1600x1066.jpg" alt="Children climbing the owl-shaped play tower"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Lincoln Square Playground, Australia</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
      <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/9a969aae62a5185f4db5ff973cf7eedc69619cc9-1000x667.jpg" alt="Two girls peeking through a wooden climbing wall"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">King’s Kindergarten, China</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
    </div>
  </div>
  <div class="kompan-relevant-content__container">
    <footer class="kompan-relevant-content__footer">
      <p class="kompan-relevant-content__footer-info">Additional 12 items</p>
      <div class="kompan-relevant-content__footer-actions">
        <button type="button" class="kompan-button kompan-button_md kompan-button_tertiary-dark">Load more<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
        <button type="button" class="kompan-button kompan-button_md">Load all<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg></button>
      </div>
    </footer>
  </div>
</section>

Three columns

Type=3 column: 16:9 cards with the Small bottom content, three per row, a centred "Load more" under the grid (the Load more boolean) and the section footer.

<section class="kompan-relevant-content kompan-relevant-content_3col" aria-labelledby="relevant-want-to-see-more-custom-nature-play">
  <div class="kompan-relevant-content__container">
    <div class="kompan-relevant-content__top">
      <div class="kompan-relevant-content__header">
        <h2 class="kompan-relevant-content__title" id="relevant-want-to-see-more-custom-nature-play">Want to see more custom nature play?</h2>
      </div>
      <div class="kompan-relevant-content__filters" role="group" aria-label="Filter by"><button type="button" class="kompan-tag kompan-tag_sm kompan-tag_selected" aria-pressed="true">All</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Sub categories</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Sectors</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Themes</button></div>
    </div>
    <div class="kompan-relevant-content__cards">
      <article class="kompan-relevant-content__card kompan-relevant-content__card_sm">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/e7d61c10c15d5c8f19cc878f61e41840dcc9441c-1600x914.jpg" alt="The pirate-ship playground at Zetland Park"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Zetland Park, Scotland</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
      <article class="kompan-relevant-content__card kompan-relevant-content__card_sm">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/25daa91b33fe981b44036954c2670e6e82edc727-1600x1066.jpg" alt="Children queuing on a wide slide"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Buccaneer Bay, Australia</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
      <article class="kompan-relevant-content__card kompan-relevant-content__card_sm">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/bb4a81fd245831de26b47bc1a62a43afd75ef3b9-1600x1066.jpg" alt="Children climbing the owl-shaped play tower"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Lincoln Square Playground, Australia</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
      <article class="kompan-relevant-content__card kompan-relevant-content__card_sm">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/9a969aae62a5185f4db5ff973cf7eedc69619cc9-1000x667.jpg" alt="Two girls peeking through a wooden climbing wall"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">King’s Kindergarten, China</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
      <article class="kompan-relevant-content__card kompan-relevant-content__card_sm">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/49d040d99874d92e901541340b7cf4f7ca7a6533-1600x1067.jpg" alt="A green climbing net seen from below"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Dinosaur Playground, Sweden</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
      <article class="kompan-relevant-content__card kompan-relevant-content__card_sm">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/ab9654ba02d9d75a5e993f6bda3fa882bd783bb0-1000x667.jpg" alt="A girl looking up through a climbing tube"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">Federal Hill Commons, USA</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    
    
  </div>
</article>
    </div>
    <div class="kompan-relevant-content__load-more"><button type="button" class="kompan-button kompan-button_md kompan-button_secondary-dark">Load more<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg></button></div>
  </div>
  <div class="kompan-relevant-content__container">
    <footer class="kompan-relevant-content__footer">
      <p class="kompan-relevant-content__footer-info">Additional 12 items</p>
      <div class="kompan-relevant-content__footer-actions">
        <button type="button" class="kompan-button kompan-button_md kompan-button_tertiary-dark">Load more<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
        <button type="button" class="kompan-button kompan-button_md">Load all<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg></button>
      </div>
    </footer>
  </div>
</section>

Asymmetric grid

Type=Asymmetrical: three columns where 3:2 and 4:5 cards alternate so the rows fall out of step, each card with tags. On mobile the columns stack in order.

<section class="kompan-relevant-content kompan-relevant-content_asymmetric" aria-labelledby="relevant-inspirational-playground-concepts">
  <div class="kompan-relevant-content__container">
    <div class="kompan-relevant-content__top">
      <div class="kompan-relevant-content__header">
        <h2 class="kompan-relevant-content__title" id="relevant-inspirational-playground-concepts">Inspirational Playground Concepts</h2>
      </div>
      <div class="kompan-relevant-content__filters" role="group" aria-label="Filter by"><button type="button" class="kompan-tag kompan-tag_sm kompan-tag_selected" aria-pressed="true">All</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Sub categories</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Sectors</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Themes</button></div>
    </div>
    <div class="kompan-relevant-content__cards">
      <div class="kompan-relevant-content__column">
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_3x2 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/bb4a81fd245831de26b47bc1a62a43afd75ef3b9-1600x1066.jpg" alt="Children climbing the owl-shaped play tower"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Sea Creatures</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/06f6f5def9acaa1a3e02c1d6504ef3ea1c776ef2-1600x748.jpg" alt="A girl at the top of a slide"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Train</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_3x2 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/b97e801e03d070499e757d923d874c4a89b5512d-1600x748.jpg" alt="A boy peeking through turquoise bars"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Dinosaur</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
      </div>
      <div class="kompan-relevant-content__column">
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/25daa91b33fe981b44036954c2670e6e82edc727-1600x1066.jpg" alt="Children queuing on a wide slide"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Owl</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_3x2 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/e7d61c10c15d5c8f19cc878f61e41840dcc9441c-1600x914.jpg" alt="The pirate-ship playground at Zetland Park"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Castle</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/ab9654ba02d9d75a5e993f6bda3fa882bd783bb0-1000x667.jpg" alt="A girl looking up through a climbing tube"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Farm</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
      </div>
      <div class="kompan-relevant-content__column">
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_3x2 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/49d040d99874d92e901541340b7cf4f7ca7a6533-1600x1067.jpg" alt="A green climbing net seen from below"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Ship</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_4x5 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/9a969aae62a5185f4db5ff973cf7eedc69619cc9-1000x667.jpg" alt="Two girls peeking through a wooden climbing wall"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Jungle</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
        <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_3x2 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/bb4a81fd245831de26b47bc1a62a43afd75ef3b9-1600x1066.jpg" alt="Children climbing the owl-shaped play tower"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><h3 class="kompan-relevant-content__card-title"><a href="#">The Fort</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
      </div>
    </div>
  </div>
  <div class="kompan-relevant-content__container">
    <footer class="kompan-relevant-content__footer">
      <p class="kompan-relevant-content__footer-info">Additional 12 items</p>
      <div class="kompan-relevant-content__footer-actions">
        <button type="button" class="kompan-button kompan-button_md kompan-button_tertiary-dark">Load more<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
        <button type="button" class="kompan-button kompan-button_md">Load all<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg></button>
      </div>
    </footer>
  </div>
</section>

List

Type=gray list: side-by-side cards — the image at width-xs on the left, a pre header, title, body and tags on the right — one under the other. On mobile each card stacks its image on top.

<section class="kompan-relevant-content kompan-relevant-content_list" aria-labelledby="relevant-latest-news">
  <div class="kompan-relevant-content__container">
    <div class="kompan-relevant-content__top">
      <div class="kompan-relevant-content__header">
        <h2 class="kompan-relevant-content__title" id="relevant-latest-news">Latest news</h2>
        <a class="kompan-button kompan-button_md" href="#">All news<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </div>
      <div class="kompan-relevant-content__filters" role="group" aria-label="Filter by"><button type="button" class="kompan-tag kompan-tag_sm kompan-tag_selected" aria-pressed="true">All</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Press releases</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Cases</button><button type="button" class="kompan-tag kompan-tag_sm" aria-pressed="false">Events</button></div>
    </div>
    <div class="kompan-relevant-content__cards">
      <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/e7d61c10c15d5c8f19cc878f61e41840dcc9441c-1600x914.jpg" alt="The pirate-ship playground at Zetland Park"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><p class="kompan-relevant-content__card-pre">12 August 2026</p><h3 class="kompan-relevant-content__card-title"><a href="#">Zetland Park, Scotland</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
      <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/25daa91b33fe981b44036954c2670e6e82edc727-1600x1066.jpg" alt="Children queuing on a wide slide"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><p class="kompan-relevant-content__card-pre">4 August 2026</p><h3 class="kompan-relevant-content__card-title"><a href="#">Buccaneer Bay, Australia</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
      <article class="kompan-relevant-content__card">
  <div class="kompan-visual kompan-visual_16x9 kompan-visual_rounded"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/bb4a81fd245831de26b47bc1a62a43afd75ef3b9-1600x1066.jpg" alt="Children climbing the owl-shaped play tower"></div>
  <div class="kompan-relevant-content__card-content">
    <div class="kompan-relevant-content__card-text">
      <div class="kompan-relevant-content__card-headers"><p class="kompan-relevant-content__card-pre">28 July 2026</p><h3 class="kompan-relevant-content__card-title"><a href="#">Lincoln Square Playground, Australia</a></h3></div>
      <p class="kompan-relevant-content__card-body">Body text</p>
    </div>
    <div class="kompan-relevant-content__card-tags"><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span><span class="kompan-tag kompan-tag_sm">Tag</span></div>
    
  </div>
</article>
    </div>
  </div>
  <div class="kompan-relevant-content__container">
    <footer class="kompan-relevant-content__footer">
      <p class="kompan-relevant-content__footer-info">Additional 12 items</p>
      <div class="kompan-relevant-content__footer-actions">
        <button type="button" class="kompan-button kompan-button_md kompan-button_tertiary-dark">Load more<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
        <button type="button" class="kompan-button kompan-button_md">Load all<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg></button>
      </div>
    </footer>
  </div>
</section>

Accessibility

The section is named by its title: Each module is a <section> with aria-labelledby pointing at the h2, so the landmark list reads "Explore even more sites" rather than a bare region.
Every card is an article with one link: A card is an <article> whose heading (h3) wraps the link; the CTA is a second link to the same page, so the accessible name of the card is its title, not "See the case".
The carousel is a scrollable region: The track is focusable (tabindex="0") with the section title as its accessible name, so keyboard users can reach it and scroll with the arrow keys; the Carousel footer arrows are real buttons.
The filter chips are toggle buttons: Quick filters are <button aria-pressed> inside a group labelled "Filter by", so the selected filter is announced; a screen reader hears "Playgrounds, toggle button, pressed".
Load more keeps focus: When "Load more" appends cards, keep the focus on the button and announce the new count, so the user is not thrown to the top of the list.

Stylesheet

Shipped as @wah-kompan/kompan-ui/components/modules/relevant-content.css. Every value is a token reference, so it themes with the rest of the system rather than being restyled. The shipped file also imports Visual, Tag, Button, Carousel footer — what this component is built with — so one import is enough.

css

.kompan-relevant-content {
  --kompan-relevant-content-columns: 3;
  --kompan-relevant-content-card-gap: var(--container-gap-content-cards-xl);
  --kompan-relevant-content-card-width: 280px;

  display: grid;
  gap: var(--spacing-6xl);
  box-sizing: border-box;
  margin: 0;
  padding-block: var(--spacing-7xl);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--type-font-family-body);
}

/* The 1280px content column, padded by the responsive container token */
.kompan-relevant-content__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-default-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-lg);
}

/* Top: SectionTitle, then the filter row */
.kompan-relevant-content__top {
  display: grid;
  gap: var(--spacing-4xl);
}

/* SectionTitle (Large, Side by side): title left, optional CTA right */
.kompan-relevant-content__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.kompan-relevant-content__title {
  flex: 1 1 320px;
  max-width: var(--width-paragraph-max-width);
  margin: 0;
  font-family: var(--type-font-family-display);
  font-size: var(--type-font-size-display-md);
  font-weight: var(--type-font-weight-semibold);
  line-height: var(--type-line-height-display-md);
}

/* Quick filter: a row of Tag chips (the full Filter navigation is its own component) */
.kompan-relevant-content__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}

/* The grid: N equal columns, card gap between columns, a row gap between rows */
.kompan-relevant-content__cards {
  display: grid;
  grid-template-columns: repeat(var(--kompan-relevant-content-columns), minmax(0, 1fr));
  gap: var(--spacing-4xl) var(--kompan-relevant-content-card-gap);
  align-items: start;
}

.kompan-relevant-content_2col {
  --kompan-relevant-content-columns: 2;
}

/* Asymmetrical: three independent columns so 16:9 and 4:5 cards interleave */
.kompan-relevant-content__column {
  display: grid;
  gap: var(--kompan-relevant-content-card-gap);
}

/* gray list: one column of side-by-side cards */
.kompan-relevant-content_list {
  --kompan-relevant-content-columns: 1;
}

.kompan-relevant-content_list .kompan-relevant-content__cards {
  row-gap: var(--kompan-relevant-content-card-gap);
}

.kompan-relevant-content_list .kompan-relevant-content__card {
  grid-template-columns: minmax(0, var(--width-xs)) minmax(0, 1fr);
  gap: var(--spacing-3xl);
  align-items: start;
}

.kompan-relevant-content_list .kompan-relevant-content__card-content {
  padding-block: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* Carousels: a scroll-snapping track and the Carousel footer */
.kompan-relevant-content_carousel .kompan-relevant-content__cards,
.kompan-relevant-content_carousel-wide .kompan-relevant-content__cards {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-5xl);
}

.kompan-relevant-content_carousel-wide {
  --kompan-relevant-content-card-width: var(--width-xs);
}

.kompan-relevant-content__track {
  display: flex;
  gap: var(--kompan-relevant-content-card-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.kompan-relevant-content__track::-webkit-scrollbar {
  display: none;
}

.kompan-relevant-content__track:focus-visible {
  outline: var(--stroke-md) solid var(--color-button-focus-ring);
  outline-offset: 2px;
}

.kompan-relevant-content__track > .kompan-relevant-content__card {
  flex: 0 0 var(--kompan-relevant-content-card-width);
  scroll-snap-align: start;
}

/* Card: Visual on top, then the bottom content */
.kompan-relevant-content__card {
  display: grid;
  gap: var(--spacing-xl);
  align-content: start;
  min-width: 0;
}

.kompan-relevant-content__card-content {
  display: grid;
  justify-items: start;
  gap: var(--spacing-md);
  min-width: 0;
}

.kompan-relevant-content__card-text {
  display: grid;
  gap: var(--spacing-md);
  width: 100%;
  max-width: var(--width-paragraph-max-width);
}

.kompan-relevant-content__card-headers {
  display: grid;
  gap: var(--spacing-xs);
}

.kompan-relevant-content__card-pre,
.kompan-relevant-content__card-body {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-font-size-md);
  font-weight: var(--type-font-weight-regular);
  line-height: var(--type-line-height-md);
}

.kompan-relevant-content__card-title {
  margin: 0;
  font-family: var(--type-font-family-display);
  font-size: var(--type-font-size-display-xs);
  font-weight: var(--type-font-weight-semibold);
  line-height: var(--type-line-height-display-xs);
  overflow-wrap: break-word;
}

.kompan-relevant-content__card-title a {
  color: inherit;
  text-decoration: none;
}

.kompan-relevant-content__card-title a:hover {
  text-decoration: underline;
}

.kompan-relevant-content__card-title a:focus-visible {
  outline: var(--stroke-md) solid var(--color-button-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Small bottom content (3 column) */
.kompan-relevant-content__card_sm .kompan-relevant-content__card-title {
  font-family: var(--type-font-family-body);
  font-size: var(--type-font-size-lg);
  line-height: var(--type-line-height-lg);
}

.kompan-relevant-content__card_sm .kompan-relevant-content__card-body {
  font-size: var(--type-font-size-sm);
  line-height: var(--type-line-height-sm);
}

.kompan-relevant-content__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding-block: var(--spacing-xs);
}

.kompan-relevant-content__card-cta {
  padding-top: var(--spacing-md);
}

/* Centred "Load more" under a grid */
.kompan-relevant-content__load-more {
  display: flex;
  justify-content: center;
}

/* Section footer: count left, actions right */
.kompan-relevant-content__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg);
}

.kompan-relevant-content__footer-info {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-font-size-sm);
  font-weight: var(--type-font-weight-regular);
  line-height: var(--type-line-height-sm);
}

.kompan-relevant-content__footer-actions {
  display: flex;
  gap: var(--spacing-xl);
  margin-left: auto;
}

/* Mobile: every grid becomes one stacked column of 16:9 cards; the carousels keep scrolling */
@media (max-width: 480px) {
  .kompan-relevant-content {
    --kompan-relevant-content-columns: 1;
    --kompan-relevant-content-card-width: 276px;
  }

  .kompan-relevant-content__cards {
    row-gap: var(--kompan-relevant-content-card-gap);
  }

  .kompan-relevant-content__column {
    display: contents;
  }

  .kompan-relevant-content_list .kompan-relevant-content__card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xl);
  }

  .kompan-relevant-content_list .kompan-relevant-content__card-content {
    padding: 0;
  }

  .kompan-relevant-content:not(.kompan-relevant-content_carousel):not(.kompan-relevant-content_carousel-wide) .kompan-visual {
    --kompan-visual-ratio: 16 / 9;
  }

  .kompan-relevant-content__card_sm .kompan-relevant-content__card-title {
    font-family: var(--type-font-family-display);
    font-size: var(--type-font-size-display-xs);
    line-height: var(--type-line-height-display-xs);
  }

  .kompan-relevant-content__card_sm .kompan-relevant-content__card-body {
    font-size: var(--type-font-size-md);
    line-height: var(--type-line-height-md);
  }

  .kompan-relevant-content .kompan-carousel-footer {
    display: none;
  }
}