Skip to content
Learn Measure Blog Case studies About
  • Home
  • All patterns
  • Component patterns

Media Scroller

Jun 1, 2022

This pattern shows how to create horizontal scrolling experiences for the web that are minimal, responsive, accessible and work across browsers and platforms (like TVs!)

Full article · Video on YouTube · Source on Github

<section>
  <header>
    <h2>Similar to Locke & Key</h2>
    <h3>Popular with similar viewers</h3>
  </header>

  <ul class="horizontal-media-scroller">
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?179">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?82">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?39">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?94">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?95">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?86">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?87">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?88">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?79">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?910">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?198">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?287">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?397">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?789">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?785">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?76">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?78">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?788">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?997">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?170">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?18">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?93">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?48">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?75">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?76">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?79">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?78">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?999">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?170">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?13">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?322">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?43">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>
  </ul>
</section>

<section>
  <header>
    <h2>Suspense</h2>
  </header>

  <ul class="horizontal-media-scroller">
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?14">
      </picture>
      <figcaption>The Strain (limited)</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?15">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?16">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?17">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?18">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?19">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?11">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?12">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?13">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?110">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?121">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?132">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?123">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?144">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?125">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?126">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?137">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?118">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?419">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?110">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?112">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?122">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?313">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?194">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?915">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?176">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?187">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?178">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?189">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?117">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>
  </ul>
</section>

<section>
  <header>
    <h2>Horror</h2>
  </header>

  <ul class="horizontal-media-scroller">
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
      </picture>
      <figcaption>Penny Awful: An original series</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>
  </ul>
</section>
import {rovingIndex} from "https://cdn.skypack.dev/roving-ux"

document.querySelectorAll('.horizontal-media-scroller')
  .forEach(scroller => rovingIndex({
    element: scroller,
    target: 'a',
  }))
.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  padding-inline-start: var(--gap);
  padding-inline-end: var(--gap);
  padding-block-start: calc(var(--gap) / 2);
  padding-block-end: calc(var(--gap) / 2);

  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-left: var(--gap);
  scroll-padding-right: var(--gap);
  scroll-padding-inline: var(--gap);

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  & > li {
    display: inline-block;

    /*  container padding fix  */
    &:last-of-type figure {
      position: relative;

      &::after {
        content: "";
        position: absolute;

        inline-size: var(--gap);
        block-size: 100%;

        inset-block-start: 0;
        inset-inline-end: calc(var(--gap) * -1);
      }
    }
  }

  & figure {
    scroll-snap-align: start;
  }

  & a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    outline-offset: 12px;

    &:focus {
      outline-offset: 7px;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: outline-offset .25s ease;
    }
  }
}
Open demo
Last updated: Jun 1, 2022 — Improve article
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.