Flexbox gap polyfill

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
  <h1>LTR</h1>
  <div class="container" dir="ltr">
    <div class="parent">
      <div class="child">A</div>
      <div class="child">B</div>
      <div class="child">C</div>
      <div class="child">D</div>
      <div class="child">E</div>
      <div class="child">F</div>
      <div class="child">G</div>
      <div class="child">H</div>
      <div class="child">I</div>
      <div class="child">J</div>
    </div>
  </div>

  <br />
  <h1>RTL</h1>
  <div class="container" dir="rtl">
    <div class="parent">
      <div class="child">א</div>
      <div class="child">ב</div>
      <div class="child">ג</div>
      <div class="child">ד</div>
      <div class="child">ה</div>
      <div class="child">ו</div>
      <div class="child">ז</div>
      <div class="child">ח</div>
      <div class="child">ט</div>
      <div class="child">י</div>
    </div>
  </div>  
</body>
</html>

// Add your code here

@import './flex-gap-mixin.scss';

@mixin box($width, $background) {
  width: $width;
  background: $background;
}

body {
  text-align: center;
}

.container {
  outline: 2px dashed gray;
  justify-content: center;
  @include flex-gap(10px, 25px);  
}

.parent {
  justify-content: center;
}

.child {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
  font-family: "Helvetica";

  &:nth-child(3n) {
    @include box(100px, #D8CEF6);
  }

  &:nth-child(3n + 1) {
    @include box(50px, #CEF6F5);
  }

  &:nth-child(3n + 2) {
    @include box(75px, #F3E2A9);
  }
}

@mixin flex-gap($row-gap, $column-gap: $row-gap) {
  display: flex;
  & > * {
    display: flex;
    flex-wrap: wrap;
    margin-top: -$column-gap;
  }

  & > * > * {
    display: flex;
    margin-top: $column-gap;
  }

  &:not([dir='rtl']) {
    & > * {
      margin-left: -$row-gap;
    }
    & > * > * {
      margin-left: $row-gap;
    }
  }

  &[dir='rtl'] {
    & > * {
      margin-right: -$row-gap;
    }
    & > * > * {
      margin-right: $row-gap;
    }
  }
}