如何缩放字体Awesome5图标只有在x轴没有失真

我有以下几点 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) 从 this answer 如下所示。

.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;
}

Link to codepen

有没有基于CSS的解决方案?或者,也欢迎使用一种解决方案来拉伸图标,使其填充中间列的x轴。事实上,这样更好:)