Как построить блоки .shop__body как на этом сайте?

Question

[Павел Петров]

Добрый день
Хочу сделать аналог макета как по этой ссылке: aod.alpha-coder.ru/#
Решил сделать виджеты, которые сделаны в селекторе .shop на гридах, используя grid-template-areas, но пока затрудняюсь с реализацией.
Как можно реализовать эту идею не используя большое количество селекторов в классах или в стилизации?
Пока текущая версия моих попыток написана тут: https://codepen.io/hakaslepehen/pen/jOyQmgy

Upd1. Сделал решение левой половины блока виджетов. Прошу прощения за то, что поменялись селекторы отчасти или полностью, но мне кажется, что для реализации идеи можно найти более элегантное решение, поэтому хотелось бы узнать мнение любого, кто захочет уделить свое время на этот вопрос. Но хочу отметить, что в этой реализации не предусмотрена адаптивность под мобильные устройства, так как grid-template-columns стал бы двухколоночным, а grid-template-areas имело бы вид:

grid-template-areas: "sm sm"
"wide"
"col col"
"wide"
"sm sm"

div {
  padding: 5px;
  box-sizing: border-box;
  margin: 0;
}

.table {
  display: flex;
  background: red;
}
.table__left {
  flex: 1 1 50%;
  border: 1px solid pink;
}
.table__right {
  flex: 1 1 50%;
  border: 1px solid pink;
}

.shop__block .widget {
  display: grid;
  grid-template-columns: repeat 3, 1fr;
  grid-template-rows: repeat 2, 1fr;
  grid-gap: 2px;
  grid-template-areas: "sm1 sm2 col" "wide wide col";
}
.shop__block .widget .saddle1 {
  grid-area: sm1;
  background: yellow;
}
.shop__block .widget .saddles {
  grid-area: sm2;
  background: #3ae6ca;
}
.shop__block .widget_col {
  grid-area: col;
  background: green;
}
.shop__block .widget_wide {
  grid-area: wide;
  background: pink;
}

<section class="shop">
  <div class="shop__block table">
    <div class="table__left widget">
      <div class="widget_sm saddle1">widget_sm1</div>
      <div class="widget_sm saddles">widget_sm2</div>
      <div class="widget_wide saddle2">widget_wide</div>
      <div class="widget_col back-bag">widget_col</div>
    </div>
    <div class="table__right">
      <div class="widget_col bike">widget_col</div>
      <div class="widget_wide gallery">widget_wide</div>
      <div class="widget_sm saddle3">widget_sm</div>
      <div class="widget_sm bag">widget_sm</div>
    </div>
  </div>
</section>