Как сделать элементы меню как на макете?

Question

Im p3l @LoranDeMarcus

HTML
CSS

Как сделать элементы меню как на макете?

Добрый день, учусь верстать и столкнулся с проблемой. Не получается сверстать меню как на макете.

А именно расположить все элементы так же, как на макете.

.main {
  margin-bottom: 20px;
  padding-top: 30px;
  width: 1300px;
  height: 560px;
  background: rgba(46, 204, 113, 0.65) url("../img/background.png");
  background-blend-mode: screen;
}

.main__menu {
  margin: 0 30px 0 80px;
  width: 263px;
  height: 500px;
  background-color: #ecf0f1;
  border-radius: 8px;
}

.main__menu .menu__title {
  border-radius: 8px 8px 0 0;
  width: 100%;
  height: 66px;
  background: #2ecc71;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 53px;
  text-transform: uppercase;
  text-align: center;
}

.main__menu .menu__list {
  list-style: none;
}

.main__menu .menu__list .menu__item {
  padding-left: 15px;
  padding-right: 15px;
  width: 248px;
  height: 68px;
  background-color: #ecf0f1;
  position: relative;
}

.main__menu .menu__list .menu__item::before {
  content: "•";
  color: #2ecc71;
  font-size: 2em;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.main__menu .menu__list .menu__item::after {
  content: "";
  border-top: 1px solid #2ecc71;
  width: 223px;
  position: absolute;
  top: 10px;
}

.menu__list .menu__item .menu__link {
  color: #34495e;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  position: relative;
  display: block;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #2ecc71;
}

<section class="main">
  <div class="main__menu menu">
    <p class="menu__title">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="24px">
            <image  x="0px" y="0px" width="21px" height="24px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAQAAAC/gH7DAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfjCgsQGRxSkgoLAAAByUlEQVQ4y42TPWiTURSGn3xBWykONYpCqagZBH+WFjcpBdHJJTp0UCGKDoKDqB3ioEtdVQQRSsHBQRDNojhYpBQRog4GFLW2aqRFUSuWJGCxTR+H7+uXFiTxPcuF+3C457zvTQgA3fziIw0VANBJjjQ0RxPsJ4P/g6Y4TsDGZihiRtX7tkqjwlbvqjprXzN0qxV1Tp2yqzF6RK065R/13T/hNnu94gG8rpZ94ndVS/Yuwzrsd8yaD23HUXXevEVDTXsw7nbMkqoVuwXfq3rPO9YieMbDYspBVb+peVcLflW16OnopDruTodUHfOZekkkiKzdQYWReNkFshwFyoySBmZCt6oAJOnjJj8AKFFkLwHylCQpCE0PmIw67WEdlwEosoHtwAIj9ACwIkSfx2kY4AGPgS90EgCT/I7ylgiBR3GmNnOWC0wzzxoAXtIRQlRCtLBknCxd9LOSVQC8ZhsAC3xeTNY+q/GaftrjbguqnnJC1bemwwxg0px1DdviLbXsGWdVPb8YF8QWL8ZozXOeVF94Q9Xbti9FMemhyGId94SfzPtKHXR9PYT12mIuet2QVx32jVnb6veJZb8vYC27yLCJa1T5EE0e6S/Gpr8IBNoCpQAAAABJRU5ErkJggg==" />
          </svg> Каталог
    </p>
    <ul class="menu__list">
      <li class="menu__item">
        <a href="#" class="menu__link">Формы для выпечки</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Кондитерский инвентарь</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Кондитерские ингредиенты</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Оборудование</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Все для кухни</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Фототорт. <br>
              Печать на пищевой бумаге</a>
      </li>
    </ul>
  </div>
</section>