Блок преимуществ для сайта автосервиса

<section class="vbpas">
  <div class="vbpas-wrap">
    <div class="vbpas-head">
      <h2 class="vbpas-h2">На чём держится работа цеха</h2>
      <p class="vbpas-lead">Шесть вещей, которые видно в заказ-наряде и в самом цехе: оборудование, порядок согласования, сроки и то, на чём вы уедете, пока машина стоит на посту.</p>
    </div>

    <div class="vbpas-grid">
      <article class="vbpas-tile">
        <div class="vbpas-top">
          <span class="vbpas-ico" aria-hidden="true">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
              <path d="M4 26h24M8 26V13l8-5 8 5v13"/><path d="M12 26v-7h8v7"/><path d="M16 8V3"/>
            </svg>
          </span>
          <p class="vbpas-fig"><b data-to="6">0</b><i>постов</i></p>
        </div>
        <h3>Шесть постов и два подъёмника под долгий ремонт</h3>
        <p>Машины не ждут очереди на подъёмник: посты работают параллельно. Два из них закреплены за разбором двигателя и коробки, остальные закрывают обслуживание в день обращения.</p>
      </article>

      <article class="vbpas-tile">
        <div class="vbpas-top">
          <span class="vbpas-ico" aria-hidden="true">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
              <rect x="5" y="6" width="22" height="15" rx="2.5"/><path d="M12 25h8M16 21v4"/><path d="M9 15l3-4 3 5 3-7 3 6h2"/>
            </svg>
          </span>
          <p class="vbpas-fig"><b data-to="14">0</b><i>марок в сканере</i></p>
        </div>
        <h3>Дилерский сканер по японским, корейским и европейским маркам</h3>
        <p>Читаются закрытые блоки управления, недоступные универсальным сканерам. Кодирование форсунок, адаптация коробки и сброс сервисных интервалов делаются на месте, без поездки к дилеру.</p>
      </article>

      <article class="vbpas-tile">
        <div class="vbpas-top">
          <span class="vbpas-ico" aria-hidden="true">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
              <rect x="3" y="8" width="26" height="18" rx="3"/><path d="M11 8l2-3h6l2 3"/><circle cx="16" cy="17" r="5"/>
            </svg>
          </span>
          <p class="vbpas-fig"><b data-pre="до " data-to="30">0</b><i>снимков по этапам</i></p>
        </div>
        <h3>Фотоотчёт приходит по ходу работы</h3>
        <p>Снимаем состояние узла при разборе, снятые детали рядом с новыми и собранный узел. Фотографии уходят в мессенджер до того, как машина съедет с поста, и остаются у вас после выдачи.</p>
      </article>

      <article class="vbpas-tile">
        <div class="vbpas-top">
          <span class="vbpas-ico" aria-hidden="true">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
              <path d="M27 20c0 2-1.6 3.6-3.6 3.6H12L6 28v-4.4C4.4 23 4 21.6 4 20V9.6C4 7.6 5.6 6 7.6 6h15.8C25.4 6 27 7.6 27 9.6z"/><path d="M11 12h11M11 17h7"/>
            </svg>
          </span>
          <p class="vbpas-fig"><b data-to="100">0</b><i>процентов доп-работ по звонку</i></p>
        </div>
        <h3>Ни одна лишняя гайка без вашего согласия</h3>
        <p>Всё, что вышло за рамки наряда, попадает в отдельный список с ценой и причиной. Мастер звонит, показывает фото и ждёт ответа; пока согласия нет, работы стоят.</p>
      </article>

      <article class="vbpas-tile">
        <div class="vbpas-top">
          <span class="vbpas-ico" aria-hidden="true">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
              <path d="M16 3l11 4v9c0 7-4.6 11.6-11 13.8C9.6 27.6 5 23 5 16V7z"/><path d="M11.5 16l3 3 6-6.5"/>
            </svg>
          </span>
          <p class="vbpas-fig"><b data-to="12">0</b><i>месяцев на работы</i></p>
        </div>
        <h3>Гарантия вписана в заказ-наряд строкой</h3>
        <p>Срок и пробег указаны рядом с каждой работой, спорить о формулировках не придётся. Гарантийный ремонт берём вне очереди и за свой счёт, машину принимаем в день обращения.</p>
      </article>

      <article class="vbpas-tile">
        <div class="vbpas-top">
          <span class="vbpas-ico" aria-hidden="true">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
              <path d="M4 21v-4l2.5-6.5C7 9 8.2 8 9.6 8h12.8c1.4 0 2.6 1 3.1 2.5L28 17v4"/><path d="M4 17h24"/><circle cx="9.5" cy="21.5" r="2.5"/><circle cx="22.5" cy="21.5" r="2.5"/>
            </svg>
          </span>
          <p class="vbpas-fig"><b data-to="5">0</b><i>машин на подмену</i></p>
        </div>
        <h3>Подменный автомобиль на время ремонта</h3>
        <p>Пять машин с полным баком закреплены за сервисом и выдаются бесплатно, если ремонт занимает больше суток. Оформление занимает десять минут: паспорт, права и подпись в акте.</p>
      </article>
    </div>
  </div>
</section>

<style>
.vbpas, .vbpas *, .vbpas *::before, .vbpas *::after { box-sizing: border-box; }
.vbpas {
  --acc: #ff8a1f; --acc-dark: #e8760f; --bg: #fff; --panel: #f6f6f7; --ink: #17191c; --muted: #62676e; --line: #e4e6e9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbpas-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpas-head { max-width: 46em; margin-bottom: clamp(26px, 3.2vw, 44px); }
.vbpas-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbpas-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbpas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.vbpas-tile { position: relative; background: var(--panel); border-radius: 16px; padding: clamp(20px, 2.2vw, 28px);
  border-top: 3px solid var(--line); transition: border-color .22s ease, background .22s ease; }
.vbpas-tile:hover { border-top-color: var(--acc); background: #fff; box-shadow: 0 8px 26px rgba(23, 25, 28, .07); }
.vbpas-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.vbpas-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(255, 138, 31, .13); color: var(--acc-dark); }
.vbpas-ico svg { width: 24px; height: 24px; }
.vbpas-fig { margin: 0; text-align: right; }
.vbpas-fig b { display: block; font-family: var(--fh); font-size: clamp(28px, 3vw, 38px); line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.vbpas-fig i { display: block; font-style: normal; font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 6px; max-width: 11em; margin-left: auto; }
.vbpas-tile h3 { font-family: var(--fh); font-size: 17.5px; line-height: 1.32; font-weight: 600; margin: 0 0 10px; }
.vbpas-tile p:not(.vbpas-fig) { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted); }

@media (max-width: 420px) {
  .vbpas-top { flex-direction: column; align-items: flex-start; }
  .vbpas-fig { text-align: left; }
  .vbpas-fig i { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .vbpas-tile { transition: none !important; } }
</style>

<script>
(function () {
  var DUR = 900;   /* длительность набора цифры, мс */

  var roots = document.querySelectorAll('.vbpas');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var nums = Array.prototype.slice.call(root.querySelectorAll('.vbpas-fig b'));
    var calm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function pretty(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }
    function put(el, n) { el.textContent = (el.getAttribute('data-pre') || '') + pretty(n); }
    function done(el) { put(el, parseInt(el.getAttribute('data-to'), 10) || 0); }

    function run(el) {
      var to = parseInt(el.getAttribute('data-to'), 10) || 0;
      if (calm || !window.requestAnimationFrame) { put(el, to); return; }
      var start = 0;
      function step(ts) {
        if (!start) start = ts;
        var p = Math.min(1, (ts - start) / DUR);
        var e = 1 - Math.pow(1 - p, 3);
        put(el, Math.round(to * e));
        if (p < 1) window.requestAnimationFrame(step);
      }
      window.requestAnimationFrame(step);
    }

    nums.forEach(function (el) { put(el, 0); });

    if (!('IntersectionObserver' in window)) { nums.forEach(done); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) {
        if (!e.isIntersecting) return;
        var i = nums.indexOf(e.target);
        setTimeout(function () { run(e.target); }, Math.min(i, 5) * 90);
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -12% 0px' });
    nums.forEach(function (el) { io.observe(el); });
    setTimeout(function () { nums.forEach(done); }, 3000);
  }
})();
</script>

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