Dynami c текст рядом с иконками, которые образуют круг

Question

Мне нужно нарисовать круг значков с текстом рядом с каждым значком. Код, который у меня есть, работает по этой ссылке:

https://codepen.io/fmayor/pen/gOaPyvX

@import "compass/css3";

/// Mixin to place items on a circle
/// @author Hugo Giraudel
/// @author Ana Tudor
/// @param {Integer} $item-count - Number of items on the circle
/// @param {Length} $circle-size - Large circle size
/// @param {Length} $item-size - Single item size
@mixin on-circle($item-count, $circle-size, $item-size) {  
  position: relative;
  width:  $circle-size;
  height: $circle-size;
  border-radius: 50%;
  padding: 0; 
  list-style: none;
  
  > * {
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    margin: -($item-size / 2);
    width:  $item-size;
    height: $item-size;
  
    $angle: (360 / $item-count);
    $rot: -90;

    @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: rotate($rot * 1deg) translate($circle-size / 2) rotate($rot * -1deg);
      }

      $rot: $rot + $angle;
    }
  }
}

.circle-container {
  @include on-circle($item-count: 8, $circle-size: 25em, $item-size: 3em); 
  margin: 5em auto 0;
  
  .gc-item {
    display: inline-flex !important;

    .gc-item-text {
      display: table !important;
      padding: 0 1em;
      width: 15em;
    }
  }

  img { 
    display: block; 
    max-width: 100%;
    filter: grayscale(100%);
    border: solid 5px tomato;
    transition: .15s;
     
    &:hover {
      filter: grayscale(0);
    }
  }
}

<ul class='circle-container'>
  <li class='gc-item'><img class="gc-item-icon" src='https://dummyimage.com/200'><div class="gc-item-text">Text number 1</div></li>
  <li class='gc-item'><img class="gc-item-icon" src='https://dummyimage.com/200'><div class="gc-item-text">Text number 2</div></li>
  <li class='gc-item'><img class="gc-item-icon" src='https://dummyimage.com/200'><div class="gc-item-text">Text number 3</div></li>
  <li class='gc-item'><img class="gc-item-icon" src='https://dummyimage.com/200'><div class="gc-item-text">Text number 4</div></li>
  <li class='gc-item'><img class="gc-item-icon" src='https://dummyimage.com/200'><div class="gc-item-text">Text number 5</div></li>
  <li class='gc-item'><img class="gc-item-icon" src='https://dummyimage.com/200'><div class="gc-item-text">Text number 6</div></li>
  <li class='gc-item'><img class="gc-item-icon" src='https://dummyimage.com/200'><div class="gc-item-text">Text number 7</div></li>
  <li class='gc-item'><img class="gc-item-icon" src='https://dummyimage.com/200'><div class="gc-item-text">Text number 8</div></li>
</ul>

Как вы можете видеть, последние n / 2 текста значков располагаются справа от значка, и мне нужно, чтобы они располагались слева от значок, потому что изображение будет размещено в центре, и я не хочу, чтобы текст, покрывающий изображение в центре.

Код, показанный в ссылке выше, является упрощением, на самом деле он динамический c , Количество предметов, образующих круг, может быть разным. Мне всегда нужно, чтобы текст располагался слева от значка, если этот значок находится с левой стороны круга, и справа от значка, если этот значок находится с правой стороны круга.