I’m working on a Shopify website and I’m having trouble with the styling and positioning of the slide indicator circles that show which slide the user is on. Below is the relevant Liquid and CSS code for the slider controls:

Liquid Code:

{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
  <button
    type="button"
    class="slider-button slider-button--prev"
    name="previous"
    aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
    aria-controls="Slider-{{ section.id }}"
  >
    {% render 'icon-caret' %}
  </button>
  
  <div class="slider-counter slider-counter--circles">
    <div class="slideshow__control-wrapper">
      {%- for block in section.blocks -%}
        <button
          class="slider-counter__link slider-counter__link--circle link"
          aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
          aria-controls="Slider-{{ section.id }}"
        >
          <span class="circle"></span>
        </button>
      {%- endfor -%}
    </div>
  </div>
{%- endif -%}

CSS Code:

.slider-counter--circles {
  background-color: none;
}

.slider-counter--circles .slideshow__control-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.slider-counter__link--circle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.slider-counter__link--circle .circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #000;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}

.slider-counter__link--circle.active .circle {
  background-color: #000;
  border-color: #000;
}

Current Issue:

The slide indicator circles are not styled or positioned as desired.

How it looks now:

This is how it looks now

How it should look:

This is how it should look

Question:

How can I adjust the CSS or Liquid code to achieve the desired styling and position for the slide indicator circles? Any suggestions or guidance would be greatly appreciated.