Why isn't my CSS selection being applied in DOM?

[darekjht]

Hello, I'm fairly new to shopify and it's architecture so please bare with me. My goal is to allow my content editor to insert an overlay image over our banner image and have them select a css position (top-left, top-right etc...) via customizer. The code below does everything except add the appropriate css class to the block of code for positioning purposes. Any help would be appreciated. Thank you in advance...

{%- comment -%}NEW{%- endcomment -%}

{%- if section.blocks.size > 0 -%}

  {%- case block.settings.overlay_position -%}
    {% when "top-left" %}
    {% assign overlay-position = "top-left" %}
    {% when "top-right" %}
    {% assign overlay-position = "top-right" %}
    {% when "bottom-left" %}
    {% assign overlay-position = "bottom-left" %}
    {% when "bottom-right" %}
    {% assign overlay-position = "bottom-right" %}
  {%- endcase -%}

  {% render 'css-hero' %}
  <style>
    .heading-jumbo {
      opacity: 0
    }
    .heading-jumbo.words,
    .touchevents .heading-jumbo {
      opacity: 1
    }
    .image-overlay__content.top-left {
      position: absolute;
      top: 6rem;
      z-index: 9;
      left: 1.7rem;
    }

    .top-right {
      position: absolute;
      right: 1.7rem;
      top: 6rem;
      z-index: 9;
    }

    .bottom-right {
      position: absolute;
      bottom: 2rem;
      right: 1.7rem;
      z-index: 9;
    }

    .bottom-left {
      position: absolute;
      left: 1.7rem;
      bottom: 2rem;
      z-index: 9;
    }
  </style>
  {%- comment -%}<button class="hero-chat"><span class="icon-chat"> </span></button>{%- endcomment -%}
  <div class="swiper-container">
    <div class="swiper-wrapper">

      {%- for block in section.blocks -%}
        <div class="swiper-slide">
          {%- if block.settings.video != blank -%}
            <video
              data-src="{{ block.settings.video }}"
              data-poster="{{ block.settings.image | img_url:'1200x' }}"
              muted></video>
          {%- else -%}
            <picture><img
                sizes="100vw"
                data-src
                data-srcset="{%- render "bgset", image: block.settings.image -%}"
                alt="{{ block.settings.title }}"></picture>
          {%- endif -%}
          <div class="hero-content">
            {%- if block.settings.title contains "<h1" -%}
              {%- assign h = block.settings.title | strip_html | prepend: "<h1 class='heading-jumbo' data-splitting aria-label='" | append: "'" -%}
              {{ block.settings.title | replace: "<h1", "<h1 class='heading-jumbo' data-splitting" }}
            {%- else -%}
              <div
                class="heading-jumbo"
                data-splitting
                aria-label="{{ block.settings.title }}"
                style="color: {{ block.settings.title_color }}">{{ block.settings.title }}</div>
            {%- endif -%}
            {%- if block.settings.subtitle != blank -%}
              <p class="paragraph-large fade-in" style="color: {{ block.settings.subtitle_color }}">{{ block.settings.subtitle }}</p>
            {%- endif -%}
            {%- if block.settings.button_link != blank and block.settings.button_label != blank -%}
              <div class="fade-in">
                <a class="button button-primary button-large" href="{{ block.settings.button_link }}">{{ block.settings.button_label }}</a>
              </div>
            {%- endif -%}
            {%- if block.settings.banner-image_overlay != blank -%}
              <div class="image-overlay">
                <div class="image-overlay__content {{ overlay-position }}">
                  <img
                    src="{{ block.settings.banner-image_overlay | img_url: '240x240' }}"
                    alt="{{ block.settings.banner-image_overlay.alt | escape }}"
                    width="240"
                    height="240" />
                </div>
              </div>
            {%- endif -%}
          </div>

        </div>

      {%- endfor -%}
    </div>

    <div class="swiper-pagination swiper-pagination--autoplay"></div>
  </div>
{%- endif -%}

{% schema %}
  {
    "name": "Hero Section",
    "tag": "section",
    "class": "hero",
    "settings": [],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "1920 x 921px recommended"
          },
          {
            "type": "url",
            "id": "video",
            "label": "HTML5 MP4 File URL"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Title",
            "default": "Your headline here"
          },
          {
            "type": "color",
            "id": "title_color",
            "label": "Title Color",
            "default": "#fff"
          }, {
            "type": "text",
            "id": "subtitle",
            "label": "Subtitle",
            "default": "One line of text"
          }, {
            "type": "text",
            "id": "subtitle_color",
            "label": "Subtitle Color"
          }, {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          }, {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }, {
            "type": "header",
            "content": "Overlay Image"
          }, {
            "type": "image_picker",
            "id": "banner-image_overlay",
            "label": "Overlayed Image"
          }, {
            "type": "select",
            "id": "overlay_position",
            "label": "Overlay Image Alignment",
            "info": "Used to apply an overlay image over the hero banner",
            "options": [
              {
                "value": "top-left",
                "label": "Top left"
              }, {
                "value": "top-right",
                "label": "Top right"
              }, {
                "value": "bottom-left",
                "label": "Bottom left"
              }, {
                "value": "bottom-right",
                "label": "Bottom right"
              }
            ],
            "default": "top-left"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Hero Section",
        "category": "Image",
        "settings": {}
      }
    ]
  }
{% endschema %}