Image grid

<style>
  .product-image-grid  {
  display: grid;
  grid-template-columns: repeat(3, 98px);
  gap: 7px;
  }
  .product-image-item  {
  display: flex;
  flex-direction: column;
  gap: 7px;
  }
  .product-image  {
  background-size: cover;
  background-position: center;
  height: 100px;
  position: relative;
  }
  .product-rank-number  {
  padding: 2px;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-surface-invert);
  color: var(--color-text-inverse);
  }
  .product-name  {
  font-size: 10px;
  margin: 0;
  }
  .product-compare  {
  align-items: center;
  display: flex;
  font-size: 11px;
  gap: 8px;
  font-weight: 500;
  }
</style>
### Top Products This Month

<div class="product-image-grid">{{#result}}
<div class="product-image-item">
  <section class="product-image" style="background-image: url(https://{{product_images.image.value_static}})">
  <p class="product-rank-number">{{sale_price_sum_rank.value}}</p>
</section>
<section class="product-compare"> {{order_items.sale_price_sum.value_static}}<ChangeArrow current="{{order_items.sale_price_sum.value_static}}" comparison="{{order_items.sale_price_sum_1.value_static}}"></ChangeArrow>
</section>
<p class="product-name">{{products.name.value_static}}</p>
</div>{{/result}}
</div>