أداة تمرير الوسائط

يوضِّح هذا النمط كيفية إنشاء تجارب تمرير أفقي على الويب تتطلّب استخدام الإنترنت قليلًا وسريعة الاستجابة ويمكن الوصول إليها وتعمل على المتصفحات والأنظمة الأساسية (مثل أجهزة التلفزيون)

المقالة الكاملة · الفيديو على YouTube · المصدر على جيت هب

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',
  }))