Отзывы закупщиков о поставках оборудования

<section class="vbozk">
  <div class="vbozk-wrap">
    <div class="vbozk-head">
      <div class="vbozk-head__t">
        <h2 class="vbozk-h2">Отзывы отделов снабжения</h2>
        <p class="vbozk-lead">Собираем отзыв через месяц после поставки. В карточке указано, что закупали, каким объёмом и за сколько дней партия доехала до площадки.</p>
      </div>
      <ul class="vbozk-sum">
        <li><b>214</b><span>компаний закупают у нас второй год подряд</span></li>
        <li><b>96%</b><span>партий пришли в срок, указанный в спецификации</span></li>
      </ul>
    </div>

    <div class="vbozk-grid" id="vbozk-grid"></div>
    <div class="vbozk-more"><button type="button" class="vbozk-btn" id="vbozk-btn"></button></div>
  </div>
</section>

<style>
.vbozk, .vbozk *, .vbozk *::before, .vbozk *::after { box-sizing: border-box; }
.vbozk {
  --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: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbozk-wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbozk-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 44px);
  align-items: end; margin-bottom: clamp(24px, 3.2vw, 40px); }
.vbozk-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; }
.vbozk-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 36em; }
.vbozk-sum { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.vbozk-sum li { border-top: 2px solid var(--acc); padding-top: 12px; }
.vbozk-sum b { display: block; font-family: var(--fh); font-size: 28px; line-height: 1; font-weight: 700; }
.vbozk-sum span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 7px; }

.vbozk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.vbozk-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2.2vw, 26px); }
.vbozk-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vbozk-mark { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: var(--dark); color: var(--acc);
  display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.vbozk-card__n { font-family: var(--fh); font-size: 15.5px; font-weight: 600; line-height: 1.3; margin: 0; }
.vbozk-card__b { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.vbozk-spec { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.vbozk-spec li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.vbozk-spec li b { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; }
.vbozk-card__txt { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.vbozk-card__who { display: block; font-size: 12.5px; color: #93a1ad; border-left: 2px solid var(--acc); padding-left: 11px; line-height: 1.45; }

.vbozk-more { display: flex; justify-content: center; margin-top: 18px; }
.vbozk-btn { min-height: 54px; padding: 0 30px; border: 1.5px solid var(--line); margin: 0; appearance: none; font: inherit; font-size: 16px;
  font-weight: 600; cursor: pointer; border-radius: 10px; background: #fff !important; color: var(--ink) !important; transition: .18s ease; }
.vbozk-btn:hover { border-color: var(--acc); color: var(--acc) !important; }
.vbozk-btn[hidden] { display: none; }

@media (max-width: 860px) { .vbozk-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (prefers-reduced-motion: reduce) { .vbozk * { transition: none !important; } }
</style>

<script>
(function () {
  /* ОТЗЫВЫ: компания, отрасль, закупка, объём, срок, текст, подпись */
  var REVIEWS = [
    { c: 'Ремтехмаш', m: 'РТМ', b: 'Металлообработка', what: 'Компрессорная станция с ресиверами',
      vol: '14 позиций', term: '4 дня', who: 'Сергей Ильин, начальник отдела снабжения',
      t: 'Брали компрессор на замену старому, вместе с ним ушли ресиверы, осушитель и магистраль. Полный комплект собрали за один счёт, поэтому не пришлось согласовывать четыре закупки. Инженер приехал на пуск и показал мастеру, как снимать показания.' },
    { c: 'Северная логистика', m: 'СЛ', b: 'Склад и логистика', what: 'Паллетные стеллажи и техника комплектации',
      vol: '212 секций', term: '11 дней', who: 'Марина Ковалёва, руководитель закупок',
      t: 'Расширяли склад, нужно было закрыть 1 800 квадратных метров. Прислали расчёт по высоте потолков и весу поддона, добавили защиту стоек в проездах. Отгрузили тремя машинами по графику монтажа, простоя бригады не было.' },
    { c: 'Агрокомплект', m: 'АК', b: 'Пищевое производство', what: 'Насосное оборудование в нержавеющем исполнении',
      vol: '9 насосов', term: '18 дней', who: 'Дмитрий Панов, главный инженер',
      t: 'Требовалось исполнение с допуском к пищевым средам и документы для проверки. Подобрали по подаче и напору, паспорта и сертификаты пришли вместе с грузом. Один насос заменили по гарантии на третий месяц, подменный привезли за сутки.' },
    { c: 'Стройсервис 12', m: 'СС', b: 'Строительство', what: 'Сварочные полуавтоматы и расходные материалы',
      vol: '24 аппарата', term: '2 дня', who: 'Артём Гусев, начальник участка',
      t: 'Заказ ушёл в отгрузку в день оплаты, аппараты забрали своей машиной вечером. Проволоку и сопла добавили в ту же накладную, отдельный счёт выставлять не понадобилось. Работаем с отсрочкой 30 дней, задержек по документам не было.' },
    { c: 'Тепловые сети города', m: 'ТС', b: 'Жилищное хозяйство', what: 'Запасные части к насосным агрегатам',
      vol: '340 позиций', term: '7 дней', who: 'Ольга Бекетова, специалист по закупкам',
      t: 'Закупка шла по 44-ФЗ, поставщик готовил обоснование цены и техническое задание вместе с нами. Спецификация на 340 позиций собралась без пересогласований. Сроки по контракту выдержаны, приёмка прошла с первого раза.' },
    { c: 'Уральский литейный', m: 'УЛ', b: 'Металлургия', what: 'Кран-балка и таль электрическая',
      vol: '3 комплекта', term: '26 дней', who: 'Игорь Савельев, механик цеха',
      t: 'Пролёт нестандартный, поэтому ждали изготовление под размер. Расчёт нагрузки на перекрытие сделали до подписания спецификации, крепёж прислали в комплекте. Монтаж вели своими силами, по телефону подсказывали в тот же час.' }
  ];
  var FIRST = 3;

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var grid = root.querySelector('#vbozk-grid'), btn = root.querySelector('#vbozk-btn');
    var shown = FIRST;

    function card(r) {
      return '<article class="vbozk-card"><div class="vbozk-card__top"><span class="vbozk-mark">' + r.m + '<\/span>' +
        '<div><h3 class="vbozk-card__n">' + r.c + '<\/h3><span class="vbozk-card__b">' + r.b + '<\/span><\/div><\/div>' +
        '<ul class="vbozk-spec"><li>Что закупали<b>' + r.what + '<\/b><\/li>' +
        '<li>Объём партии<b>' + r.vol + '<\/b><\/li>' +
        '<li>Срок поставки<b>' + r.term + '<\/b><\/li><\/ul>' +
        '<p class="vbozk-card__txt">' + r.t + '<\/p>' +
        '<span class="vbozk-card__who">' + r.who + '<\/span><\/article>';
    }

    function render() {
      var html = '';
      for (var k = 0; k < shown && k < REVIEWS.length; k++) html += card(REVIEWS[k]);
      grid.innerHTML = html;
      var left = REVIEWS.length - shown;
      btn.hidden = left <= 0;
      btn.textContent = left > 0 ? 'Показать ещё ' + left : '';
    }

    btn.addEventListener('click', function () { shown = REVIEWS.length; render(); });
    render();
  }
})();
</script>

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