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

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

    <div class="vbpkl-grid">
      <article class="vbpkl-tile">
        <span class="vbpkl-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="7" width="26" height="16" rx="2.5"/><path d="M11 27h10M16 23v4"/><path d="M8 17l3.5-4.5L15 17l3-6 3 4.5h3"/>
          </svg>
        </span>
        <h3>Диагностика на своём оборудовании</h3>
        <p>Томограф, ультразвук и рентген стоят в клинике, снимки делают в день обращения. Возить пациента по чужим кабинетам не нужно, врач смотрит исследование на приёме.</p>
        <span class="vbpkl-note">Снимок на руки и в электронную карту</span>
      </article>

      <article class="vbpkl-tile">
        <span class="vbpkl-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="9" width="22" height="15" rx="2.5"/><path d="M5 14h22M9 6v3M23 6v3"/><circle cx="16" cy="19" r="2.6"/>
          </svg>
        </span>
        <h3>Стерилизация под запись</h3>
        <p>Инструменты проходят автоклав класса B, каждая упаковка вскрывается при пациенте. В упаковке лежит индикатор, а цикл отмечается в журнале с датой и номером аппарата.</p>
        <span class="vbpkl-note">Журнал показываем по просьбе</span>
      </article>

      <article class="vbpkl-tile">
        <span class="vbpkl-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="M8 4h11l6 6v18H8z"/><path d="M19 4v6h6"/><path d="M12 16h8M12 21h5"/>
          </svg>
        </span>
        <h3>План лечения с ценой до начала</h3>
        <p>После диагностики врач составляет план по этапам: что делаем, в каком порядке, сколько стоит каждый шаг. Смета подписывается до первой процедуры и дальше не растёт.</p>
        <span class="vbpkl-note">Изменение только по новому согласию</span>
      </article>

      <article class="vbpkl-tile">
        <span class="vbpkl-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">
            <circle cx="16" cy="13" r="7"/><path d="M11.5 19l-2 9 6.5-3.5L22.5 28l-2-9"/>
          </svg>
        </span>
        <h3>Квалификация врача видна</h3>
        <p>У каждого специалиста в карточке указаны вуз, год выпуска и последние курсы с датами. Сертификаты лежат в папке на стойке, копию можно сфотографировать.</p>
        <span class="vbpkl-note">Обучение обновляем каждые два года</span>
      </article>

      <article class="vbpkl-tile">
        <span class="vbpkl-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>
        <h3>Гарантия на работу врача</h3>
        <p>Пломбы и коронки идут с гарантией 24 месяца, срок вписан в договор. Если результат не держится, повторный приём и переделка проходят без оплаты.</p>
        <span class="vbpkl-note">Гарантия сохраняется при плановых осмотрах</span>
      </article>

      <article class="vbpkl-tile">
        <span class="vbpkl-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="4" y="7" width="24" height="21" rx="2.5"/><path d="M4 13h24M11 4v5M21 4v5"/><path d="M13 20l2 2 4-4.5"/>
          </svg>
        </span>
        <h3>Приём в субботу и воскресенье</h3>
        <p>Выходные работают по тому же расписанию, что и будни, до 18:00. С острой болью принимает дежурный врач, для этого достаточно позвонить утром.</p>
        <span class="vbpkl-note">Дежурный врач с 09:00 до 18:00</span>
      </article>
    </div>
  </div>
</section>

<style>
.vbpkl, .vbpkl *, .vbpkl *::before, .vbpkl *::after { box-sizing: border-box; }
.vbpkl {
  --acc: #1c7f8c; --ink: #1d2b2e; --muted: #5f7276; --line: #dfe8e9; --soft: #f2f7f7;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbpkl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpkl-head { max-width: 46em; margin-bottom: clamp(26px, 3.2vw, 44px); }
.vbpkl-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbpkl-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.vbpkl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.vbpkl-tile { border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 2.4vw, 30px);
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .2s ease; }
.vbpkl-tile.is-in { opacity: 1; transform: none; }
.vbpkl-tile:hover { border-color: var(--acc); }
.vbpkl-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 14px; background: var(--soft); color: var(--acc); }
.vbpkl-ico svg { width: 28px; height: 28px; }
.vbpkl-tile h3 { font-family: var(--fh); font-size: 18px; line-height: 1.3; font-weight: 600; margin: 0 0 10px; }
.vbpkl-tile p { font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0 0 16px; }
.vbpkl-note { display: inline-block; font-size: 12.5px; line-height: 1.4; color: var(--acc); background: var(--soft); border-radius: 999px; padding: 7px 13px; }
@media (prefers-reduced-motion: reduce) { .vbpkl-tile { opacity: 1 !important; transform: none !important; transition: none !important; } }
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var tiles = Array.prototype.slice.call(root.querySelectorAll('.vbpkl-tile'));
    function showAll() { tiles.forEach(function (t) { t.classList.add('is-in'); }); }
    if (!('IntersectionObserver' in window)) { showAll(); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) {
        if (!e.isIntersecting) return;
        var i = tiles.indexOf(e.target);
        e.target.style.transitionDelay = Math.min(i, 5) * 70 + 'ms';
        e.target.classList.add('is-in');
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -10% 0px' });
    tiles.forEach(function (t) { io.observe(t); });
    setTimeout(showAll, 2500);
  }
})();
</script>

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