transform scale nie widzi elementów obok siebie

hej jak ustawić odpowiedni margines pomiędzy elementami gdy używam tranform:scale ? Mianowicie, gdy nie ma właściwosci " tranform:scale" to marginesy pomiędzy elemantami są poprawne, a gdy ustawie @media screen and (min-width: 980px) to chce powiększyć element2, ale wtedy on się powieksza, a element1 i element3 się nie odsuwaja o te 32px.

 <div class="wrapper">
    <div class="el1">Element1</div>
    <div class="el2">Element2</div>
    <div class="el3">Element3</div>
  </div>

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el1 {
  width: 80px;
  height: 30px;
  background-color: red;
}
.el2 {
  width: 80px;
  height: 30px;
  margin: 0 32px;
  background-color: green;
}
.el3 {
  width: 80px;
  height: 30px;
  background-color: blue;
}

@media screen and (min-width: 980px) {
  .el2 {
    transform: scale(1.6);
    margin: 0 32px;
  }
}

Transform wyjmuje modyfikowany element z obiegu elementów, pozostawiając po nim "dziurę" względem której pozycjonowane są pozostałe elementy.
Patrz tutaj, przy transformowaniu jednego elementu, pozostałe się nie rozjeżdżają.
http://drakonica.pl/dokumenty/transform_2d_zestawienie.htm

W twoim wypadku lepiej sprawdzi się modyfikowanie zwykłego widht i height ew. w połączeniu ze zmianą rozmiaru czcionki.

@Freja Draco: ok thanks