Horizontal product scroller

1<div class="gpl-scroller">2  <p class="gpl-scroller__heading">{{ section.settings.heading }}</p>3  <div class="gpl-scroller__track">4    {%- assign col = section.settings.collection | default: collections.all -%}5    {%- for p in col.products limit: 8 -%}6      <a class="gpl-scroller__card" href="{{ p.url }}">7        {{ p.featured_image | image_url: width: 400 | image_tag: class: 'gpl-scroller__img', loading: 'lazy' }}8        <p class="gpl-scroller__title">{{ p.title }}</p>9        <p class="gpl-scroller__price">{{ p.price | money }}</p>10      </a>11    {%- endfor -%}12  </div>13</div>14