Preserving ratios in responsive menu

Question

I'm trying to create a responsive menu with tiles.

• Depending on content, it could contain up to 8 tiles.
• It will change shape at certain breakpoints. At 8 tiles, it starts at 4x2 on small screens, changes to 1x8 at medium and ends at 2x4 at large ones.
• Each tile needs to be 150px wide and 105px high, with a small gutter inbetween them (2px in this example). On screens, where such dimensions can't fit anymore, they should shrink proportionally, retaining the layout structure (4x2).

The example below succeeds in the menu and it's tiles starting to shrink (widht-wise) when the viewport gets too narrow, but it fails at shrinking the tiles proportionally. I've tried fiddling around with width, max-width, height, max-height on all layers, the height: auto; property. Nothing worked.

I've based the menu on flexbox's wrap property, because it allows me to change the grid layout at breakpoints without compromising the HTML structure and I want to avoid using CSS grid due insufficient browser support.

Important: Expand the snipped to full screen to observe the shrinking effect.

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.tile-group {
  background-color: antiquewhite;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 608px;
}

.tile-padding {
  width: 152px;
  height: 107px;
  padding: 1px;
  max-width: 25%;
}

.tile {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
}

.tile-color-1 {
  background-color: red;
}

.tile-color-2 {
  background-color: blue;
}

.tile-color-3 {
  background-color: green;
}

.tile-color-4 {
  background-color: yellow;
}

.tile-color-5 {
  background-color: indianred;
}

.tile-color-6 {
  background-color: skyblue;
}

.tile-color-7 {
  background-color: darkseagreen;
}

.tile-color-8 {
  background-color: greenyellow;
}

<div class="tile-group">
  <div class="tile-padding">
    <div class="tile tile-color-1"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-2"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-3"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-4"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-5"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-6"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-7"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-8"></div>
  </div>
</div>