How to add old Debut 'Gallery' section to new Dawn theme?

[FairWind]

I am currently in the process of migrating my store from an older Debut theme to a new 2.0 theme, specifically Dawn version 15.0.2.

Unfortunately, Dawn doesn't have a section built in that I really like from the old Debut theme and I would like to be able to use it. The section I am referring to is labelled as "Gallery" on the old Debut theme and it is image-bar.liquid

Since I would like to use old Debut section exactly as is, but in my new Dawn theme I created a new image-bar.liquid file under sections on my new theme and copied all of the code as it was. However when I use the section the images are not rendering on the new Dawn theme so it is therefore not working at all. What would I need to change on the code in order to make it work with Dawn?

It's code (minus the multilingual schema at the end) is as follows:

<div class="grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }}">
  {% case section.blocks.size %}
    {% when 1 %}
      {%- assign column_size = '' -%}
    {% when 2 %}
      {%- assign column_size = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign column_size = 'medium-up--one-third' -%}
    {% else %}
      {%- assign column_size = 'medium-up--one-quarter' -%}
  {% endcase %}

  {% for block in section.blocks %}
    <div class="grid__item {{ column_size }} js" {{ block.shopify_attributes }}>
      {% if block.settings.link != blank %}
        <a class="image-bar__link" href="{{ block.settings.link }}">
          <div class="image-bar__item box ratio-container lazyload"
               data-bgset="{% include 'bgset', image: block.settings.image %}"
               data-sizes="auto"
               data-parent-fit="cover"
               style="background-position: {{ block.settings.alignment }};"
               data-image-loading-animation>
      {% elsif block.settings.image != blank %}
        <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
             data-bgset="{% include 'bgset', image: block.settings.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: {{ block.settings.alignment }};"
             data-image-loading-animation>
      {% else %}
        <div class="image-bar__item">
      {% endif %}
      <div class="image-bar__content{% if block.settings.cta_label != blank or block.settings.link != blank %} image-bar__overlay{% endif %}">
        {% if block.settings.image == blank %}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}

        {% if block.settings.cta_label != blank %}
          <div class="image-bar__text">
            <h3 class="image-bar__caption">{{ block.settings.cta_label | escape }}</h3>
          </div>
        {% endif %}
      </div>
      {% if block.settings.link != blank %}
        </div></a>
      {% else %}
        </div>
      {% endif %}
    </div>
    <noscript>
      <div class="grid__item {{ column_size }}" {{ block.shopify_attributes }}>
        <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
      </div>
    </noscript>
  {% endfor %}
</div>

{% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
{% endif %}

[FairWind]

I know that the above code refers to additional code in my theme.liquid file on the original debut theme. I believe I have found all of that code but I'm not sure where I should add it for the new Dawn theme. That code is as follows:

.image-bar {
  overflow: hidden; }
  @media only screen and (max-width: 749px) {
    .image-bar {
      max-width: 400px;
      margin: 0 auto; } }

.image-bar__item {
  display: block;
  color: var(--color-overlay-title-text);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover; }

.image-bar__link:hover .image-bar__overlay::before, .image-bar__link:focus .image-bar__overlay::before {
  opacity: var(--hover-overlay-opacity); }

.image-bar__link:focus {
  position: relative;
  z-index: 2; }
  .image-bar__link:focus .image-bar__content {
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-focus-ring-color; }

.image-bar__content, .image-bar__item {
  position: relative;
  width: 100%; }
  .image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item {
    height: 94px; }
  .image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
    height: 225px; }
  .image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
    height: 357px; }
  .image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
    height: 488px; }
  .image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
    height: 582px; }
  @media only screen and (min-width: 750px) {
    .image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item {
      height: 125px; }
    .image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
      height: 300px; }
    .image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
      height: 475px; }
    .image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
      height: 650px; }
    .image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
      height: 775px; } }

.image-bar__overlay::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-image-overlay);
  opacity: var(--opacity-image-overlay); }

.image-bar__caption {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
  width: 100%;
  text-align: center;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }

[PaulNewton]

@FairWind 

images are not rendering

---

transplant the bg-set snippet as well :

data-bgset="{% include 'bgset', image: block.settings.image %}"

And transplant any relevant css AND Javascript from other files.

Also see https://shopify.dev/docs/storefronts/themes/os20/migration