Este procedimento vai te ajudar muito quando você tiver consumindo API e estiver utilizando HTML, pois assim você poderá inserir dentro dessa tag algum retorno da API e consequentemente averá um comportamento diferente para cada valor que for inserido, pois este valor será manipulado no CSS.

Perceba que a tag typePokemonModal não existe na sintaxe padrão do HTML e nós acabamos de inventar isso, então se o valor dela for grass, será exibido um background e se for dark outro background e assim suscessivamente, vai depender do dado que vier da API quando você conectar é claro.

HTML

<section class="s-modal" typePokemonModal="grass">
</section>

SCSS

.s-modal {

  &[typePokemonModal="grass"] {
    .box {
      .left-container {
        background-image: url("../../assets/img/Modal/bg-bug.svg")
      }
    }
  }

  &[typePokemonModal="dark"] {
    .box {
      .left-container {
        background-image: url("../../assets/img/Modal/bg-dark.svg")
      }
    }
  }

  &[typePokemonModal="dragon"] {
    .box {
      .left-container {
        background-image: url("../../assets/img/Modal/bg-dragon.svg")
      }
    }
  }

  &[typePokemonModal="electric"] {
    .box {
      .left-container {
        background-image: url("../../assets/img/Modal/bg-electric.svg")
      }
    }
  }
}