Trình cuộn nội dung đa phương tiện

Mẫu này cho biết cách tạo trải nghiệm cuộn theo chiều ngang cho web mà ở kích thước tối thiểu, thích ứng, có thể truy cập và hoạt động trên các trình duyệt cũng như nền tảng (như TV!)

Bài viết đầy đủ · Video trên YouTube · Nguồn trên GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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