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

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

    <div class="vbuo-grid">
      <article class="vbuo-tile">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></g></svg>
        <b>до 45 дней</b>
        <h3>Отсрочка платежа</h3>
        <p>Открываем со второй поставки после подписания договора. Лимит зависит от оборота, для повторных заказов поднимаем его без залога.</p>
      </article>

      <article class="vbuo-tile">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></g></svg>
        <b>1 рабочий день</b>
        <h3>Закрывающие документы</h3>
        <p>Универсальный передаточный документ и счёт-фактура уходят вместе с грузом, копии присылаем по электронной почте в день отгрузки.</p>
      </article>

      <article class="vbuo-tile">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.4 8.3-8 9.6C7.4 20.3 4 17 4 12V6z"/><path d="M9 12l2 2 4.2-4.5"/></g></svg>
        <b>24 месяца</b>
        <h3>Гарантия и сервис</h3>
        <p>Гарантия завода плюс наша сервисная служба. Подменный агрегат на время ремонта выдаём по 68 позициям складского перечня.</p>
      </article>

      <article class="vbuo-tile">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21V9l9-6 9 6v12"/><path d="M8 21v-7h8v7M8 14h8"/></g></svg>
        <b>12 400 позиций</b>
        <h3>Свой склад в наличии</h3>
        <p>Оборудование, запасные части и расходные материалы лежат на площади 4 200 квадратных метров. Остатки обновляем каждое утро.</p>
      </article>

      <article class="vbuo-tile">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></g></svg>
        <b>до 15:00</b>
        <h3>Отгрузка в день оплаты</h3>
        <p>Счёт закрыт до трёх часов дня по московскому времени, партия уезжает сегодня. Забрать заказ самостоятельно можно до 20:00.</p>
      </article>

      <article class="vbuo-tile">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v13H4z"/><path d="M8 21h8M12 17v4M8 12l2.5 2.5L16 9"/></g></svg>
        <b>44-ФЗ и 223-ФЗ</b>
        <h3>Тендерное сопровождение</h3>
        <p>Готовим техническое задание, коммерческое предложение и обоснование цены. За прошлый год закрыли 96 закупок по этим законам.</p>
      </article>
    </div>

    <div class="vbuo-foot">
      <p class="vbuo-foot__t">Условия по отсрочке и доставке прописываем в договоре поставки. Спецификацию согласуем до подписания, цена в ней фиксируется на срок действия счёта.</p>
      <a class="vbuo-link" href="#dogovor">Посмотреть образец договора</a>
    </div>
  </div>
</section>

<style>
.vbuo, .vbuo *, .vbuo *::before, .vbuo *::after { box-sizing: border-box; }
.vbuo {
  --acc: #e0721f; --ink: #161c22; --muted: #5d6b78; --line: #dde3e9; --soft: #f3f6f9; --dark: #1a2128;
  --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;
}
.vbuo-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbuo-head { max-width: 46em; margin-bottom: clamp(24px, 3.2vw, 40px); }
.vbuo-h2 { font-family: var(--fh); font-size: clamp(25px, 3.3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbuo-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbuo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.vbuo-tile { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2.2vw, 26px);
  opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1), border-color .2s ease; }
.vbuo-tile.vbuo-on { opacity: 1; transform: none; }
.vbuo-tile:hover { border-color: var(--acc); }
.vbuo-tile svg { width: 26px; height: 26px; color: var(--acc); margin-bottom: 16px; }
.vbuo-tile b { display: block; font-family: var(--fh); font-size: clamp(24px, 2.6vw, 31px); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.vbuo-tile h3 { font-family: var(--fh); font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--muted); margin: 8px 0 12px; }
.vbuo-tile p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.vbuo-tile::after { content: ''; position: absolute; left: clamp(20px, 2.2vw, 26px); right: clamp(20px, 2.2vw, 26px); top: 62px; height: 1px; background: var(--line); }

.vbuo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; background: var(--dark); color: #c4cdd5;
  border-radius: 16px; padding: clamp(20px, 2.4vw, 28px); margin-top: 14px; }
.vbuo-foot__t { margin: 0; flex: 1 1 340px; font-size: 14.5px; line-height: 1.6; }
.vbuo-link, .vbuo-link:link, .vbuo-link:visited, .vbuo-link:active, .vbuo-link:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 10px; font-size: 15.5px; font-weight: 600; white-space: nowrap;
  background: var(--acc); color: #14181c !important; text-decoration: none !important; }
.vbuo-link:hover { background: #fff; color: #14181c !important; }

@media (max-width: 560px) { .vbuo-tile::after { top: 58px; } }
@media (prefers-reduced-motion: reduce) {
  .vbuo * { transition: none !important; }
  .vbuo-tile { opacity: 1; transform: none; }
}
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var tiles = root.querySelectorAll('.vbuo-tile');

    function show(el, k) {
      setTimeout(function () { el.className = 'vbuo-tile vbuo-on'; }, k * 90);
    }
    function showAll() { for (var j = 0; j < tiles.length; j++) show(tiles[j], j); }

    if (!('IntersectionObserver' in window)) { showAll(); return; }
    var io = new IntersectionObserver(function (es) {
      for (var j = 0; j < es.length; j++) {
        if (!es[j].isIntersecting) continue;
        var n = 0;
        for (var m = 0; m < tiles.length; m++) if (tiles[m] === es[j].target) n = m;
        show(es[j].target, n % 3);
        io.unobserve(es[j].target);
      }
    }, { rootMargin: '0px 0px -8% 0px' });
    for (var k = 0; k < tiles.length; k++) io.observe(tiles[k]);
    setTimeout(showAll, 2600);
  }
})();
</script>

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