媒体滚动条

此模式展示了如何为 Web 打造水平滚动体验,即精简、响应及时、易于访问且支持各种浏览器和平台(例如电视!)的横向滚动体验

完整文章 · YouTube 上的视频 · GitHub 上的来源

HTML

<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>

CSS


        .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;
    }
  }
}
        

JS


        import {rovingIndex} from "https://cdn.skypack.dev/roving-ux"

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