Блок преимуществ товарного бренда

<section class="vbpbr">
  <div class="vbpbr-wrap">
    <div class="vbpbr-side">
      <h2 class="vbpbr-h2">Что стоит за ценником</h2>
      <p class="vbpbr-lead">Шесть вещей, которые проверяются документами и чеком: свой цех, журнал партий, правила обмена и срок отгрузки. Цифры взяты из отчёта за прошлый год.</p>
      <a class="vbpbr-link" href="#proizvodstvo">Показать цех и склад</a>
    </div>

    <div class="vbpbr-grid">
      <article class="vbpbr-tile">
        <span class="vbpbr-ico">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M4 27V14l8-5v5l8-5v18z"/><path d="M20 27V9l8-4v22z"/><path d="M9 21h3M9 17h3"/>
          </svg>
        </span>
        <b class="vbpbr-num" data-num="9" data-suf=" лет">0</b>
        <h3>Своё производство</h3>
        <p>Цех в Туле работает с 2016 года: формовка, обжиг, шлифовка дерева и упаковка идут под одной крышей. Подрядчикам отдаём только печать на коробках.</p>
        <span class="vbpbr-fin">1 400 м² площади, 24 человека в смене</span>
      </article>

      <article class="vbpbr-tile">
        <span class="vbpbr-ico">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M8 4h16v24H8z"/><path d="M12 11h8M12 16h8M12 21h5"/><circle cx="24" cy="24" r="6" fill="none"/><path d="M21.5 24l1.8 1.8L26.5 22"/>
          </svg>
        </span>
        <b class="vbpbr-num" data-num="100" data-suf=" %">0</b>
        <h3>Контроль партий</h3>
        <p>У каждой партии свой номер, он стоит на дне изделия и в паспорте заказа. По номеру видно дату обжига, состав глазури и кто вёл смену.</p>
        <span class="vbpbr-fin">Журнал партий храним пять лет</span>
      </article>

      <article class="vbpbr-tile">
        <span class="vbpbr-ico">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M5 13a11 11 0 0 1 19-5"/><path d="M27 19a11 11 0 0 1-19 5"/><path d="M24 3v6h-6M8 29v-6h6"/>
          </svg>
        </span>
        <b class="vbpbr-num" data-num="30" data-suf=" дней">0</b>
        <h3>Обмен и возврат</h3>
        <p>Вещь без следов использования принимаем обратно месяц, а не две недели. Обратную отправку из пункта выдачи оплачиваем сами.</p>
        <span class="vbpbr-fin">Деньги возвращаем за 3 рабочих дня</span>
      </article>

      <article class="vbpbr-tile">
        <span class="vbpbr-ico">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M16 3l11 4v9c0 7-4.6 11.6-11 13.5C9.6 27.6 5 23 5 16V7z"/><path d="M11.5 16l3 3 6-6.5"/>
          </svg>
        </span>
        <b class="vbpbr-num" data-num="2" data-suf=" года">0</b>
        <h3>Гарантия на изделие</h3>
        <p>Скол глазури, трещина после мойки, разошедшийся шов на деревянной ручке: меняем на новую вещь без экспертизы и споров.</p>
        <span class="vbpbr-fin">На стальную посуду гарантия 10 лет</span>
      </article>

      <article class="vbpbr-tile">
        <span class="vbpbr-ico">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <circle cx="16" cy="16" r="12"/><path d="M16 9v7l5 3"/>
          </svg>
        </span>
        <b class="vbpbr-num" data-num="24" data-suf=" часа">0</b>
        <h3>Сроки отгрузки</h3>
        <p>Заказ до 16:00 уезжает перевозчику в тот же день, поздний уходит на следующее утро. Складские остатки в каталоге обновляются каждый час.</p>
        <span class="vbpbr-fin">97 % заказов ушли в срок за год</span>
      </article>

      <article class="vbpbr-tile">
        <span class="vbpbr-ico">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M16 4l12 6v12l-12 6-12-6V10z"/><path d="M4 10l12 6 12-6M16 16v12"/>
          </svg>
        </span>
        <b class="vbpbr-num" data-num="3" data-suf=" слоя">0</b>
        <h3>Упаковка</h3>
        <p>Керамика едет в ячейке из вспененного полиэтилена, между слоями картон, снаружи гофрокороб с угловыми вставками.</p>
        <span class="vbpbr-fin">0,4 % отправок приходят с боем</span>
      </article>
    </div>
  </div>
</section>

<style>
.vbpbr, .vbpbr *, .vbpbr *::before, .vbpbr *::after { box-sizing: border-box; }
.vbpbr {
  --acc: #9c2b45; --ink: #1e1c1b; --muted: #6b6561; --line: #e4e0dc; --soft: #f7f5f2;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(38px, 5.2vw, 86px) 20px;
}
.vbpbr-wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 38px);
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 2.22fr); gap: clamp(24px, 3.6vw, 52px); align-items: start; }
.vbpbr-side { position: sticky; top: 24px; }
.vbpbr-h2 { font-family: var(--fh); font-size: clamp(26px, 3.3vw, 40px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }
.vbpbr-lead { font-size: 15.5px; line-height: 1.62; color: var(--muted); margin: 0 0 20px; }
.vbpbr-link, .vbpbr-link:link, .vbpbr-link:visited, .vbpbr-link:focus { font-size: 15px; font-weight: 600;
  color: var(--acc) !important; text-decoration: underline !important; text-underline-offset: 4px; }

.vbpbr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.vbpbr-tile { background: #fff; border-radius: 20px; padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; }
.vbpbr-ico { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px;
  background: var(--soft); color: var(--acc); margin-bottom: 16px; }
.vbpbr-ico svg { width: 26px; height: 26px; }
.vbpbr-num { display: block; font-family: var(--fh); font-size: clamp(26px, 2.8vw, 33px); line-height: 1; font-weight: 700;
  letter-spacing: -.02em; color: var(--acc); margin-bottom: 8px; }
.vbpbr-tile h3 { font-family: var(--fh); font-size: 17.5px; line-height: 1.25; font-weight: 600; margin: 0 0 9px; }
.vbpbr-tile p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.vbpbr-fin { display: block; margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; font-size: 12.5px; line-height: 1.45; color: #9a938e; }

@media (max-width: 940px) {
  .vbpbr-wrap { grid-template-columns: minmax(0, 1fr); }
  .vbpbr-side { position: static; }
}
@media (prefers-reduced-motion: reduce) { .vbpbr * { transition: none !important; } }
</style>

<script>
(function () {
  var roots = document.querySelectorAll('.vbpbr');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var nums = root.querySelectorAll('.vbpbr-num');
    var calm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function run(el, delay) {
      var to = parseInt(el.getAttribute('data-num'), 10) || 0;
      var suf = el.getAttribute('data-suf') || '';
      if (calm) { el.textContent = to + suf; return; }
      var start = null, dur = 900;
      function step(ts) {
        if (start === null) start = ts;
        var p = Math.min(1, (ts - start) / dur);
        el.textContent = Math.round(to * (1 - Math.pow(1 - p, 3))) + suf;
        if (p < 1) requestAnimationFrame(step);
      }
      setTimeout(function () { requestAnimationFrame(step); }, delay);
    }

    function fire(el) {
      if (el.__done) return;
      el.__done = 1;
      var list = root.querySelectorAll('.vbpbr-num');
      var pos = 0;
      for (var k = 0; k < list.length; k++) { if (list[k] === el) pos = k; }
      run(el, (pos % 3) * 110);
    }

    function all() { for (var m = 0; m < nums.length; m++) fire(nums[m]); }

    if (!('IntersectionObserver' in window)) { all(); return; }
    var io = new IntersectionObserver(function (es) {
      for (var q = 0; q < es.length; q++) {
        if (es[q].isIntersecting) { fire(es[q].target); io.unobserve(es[q].target); }
      }
    }, { rootMargin: '0px 0px -12% 0px' });
    for (var n = 0; n < nums.length; n++) io.observe(nums[n]);
    setTimeout(all, 2800);
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.