Как масштабировать значок Font Awesome 5 только по оси X без искажений

Question

У меня есть следующий grid макет.

<div class="container">
  <i class="far fa-circle left"></i>  <!--left col-->
  <i class="fas fa-long-arrow-alt-right arrow"></i>  <!--mid col-->
  <i class="fas fa-circle right"></i>  <!--right col-->
</div>

Во всех 3 столбцах я показываю значки. Я хочу увеличить иконку, посередине, только по оси X, без искажений. Я пытался применить transform: scale(x,y) из этого ответа , как показано ниже.

.container {
  width: 10em;
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
}

.arrow {
  justify-self: center;
  font-size: 250%;
  transform: scale(2, 1); /*<-- scaling*/
}

.left {
  font-size: 250%;
  justify-self: end;
}

.right {
  font-size: 250%;
  justify-self: start;
}

Однако, это искажает значок, как видно ниже.

Ссылка на codepen .

Есть ли какое-нибудь решение на основе CSS для этого? В качестве альтернативы также приветствуется решение, которое растягивает значок, так что оно заполняет ось х среднего столбца. На самом деле, это даже лучше:)