如何在保持内容的宽高比相同的同时调整div大小？

Question

这是代码的JsFiddle。

I want the card stacks to look like this regardless of screen size 但目前，它要么重叠要么变得太小。我对css的理解非常有限，但我猜我需要使用适当的断点来为每个屏幕大小编写css，或者用视口调整所有内容？  使用它来调整卡片堆栈的大小，但在执行此操作时无法正确对齐所有内容。

@media only screen and (max-width: 300px) {
  .petalgrid {
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
  }
}

@media only screen and ( max-width: 400px) {
  .petalgrid {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
  }
}