Блок «Бригада на объекте» для сайта ремонта

<section class="vbbro">
  <div class="vbbro-wrap">
    <div class="vbbro-head">
      <h2 class="vbbro-h2">Кто будет работать в вашей квартире</h2>
      <p class="vbbro-lead">Постоянная бригада, без подряда на сторону. У каждого своя зона ответственности и свой участок работ, который он закрывает от начала до конца.</p>
    </div>

    <div class="vbbro-grid" id="vbbro-grid"></div>

    <p class="vbbro-foot">Состав бригады закрепляется в договоре. Познакомиться можно на замере: приезжает прораб, который потом ведёт объект. <a class="vbbro-link" href="#zamer">Записаться на замер</a></p>
  </div>
</section>

<style>
.vbbro, .vbbro *, .vbbro *::before, .vbbro *::after { box-sizing: border-box; }
.vbbro {
  --acc: #b4552b; --ink: #23201d; --muted: #6d6660; --line: #e3ddd5; --soft: #f6f3ef;
  --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;
}
.vbbro-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbbro-head { max-width: 42em; margin-bottom: clamp(24px, 3vw, 40px); }
.vbbro-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; }
.vbbro-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbbro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.vbbro-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 2.2vw, 26px);
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.vbbro-card.is-in { opacity: 1; transform: none; }
.vbbro-ava { width: 76px; height: 76px; border-radius: 50%; display: block; margin-bottom: 16px; }
.vbbro-name { font-family: var(--fh); font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.vbbro-role { display: block; font-size: 13.5px; font-weight: 600; color: var(--acc); letter-spacing: .01em; margin-bottom: 14px; }
.vbbro-about { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.vbbro-nums { display: flex; gap: 22px; margin: auto 0 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.vbbro-nums div { min-width: 0; }
.vbbro-nums b { display: block; font-family: var(--fh); font-size: 22px; font-weight: 700; line-height: 1.1; }
.vbbro-nums span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.vbbro-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vbbro-tags li { font-size: 11.5px; line-height: 1; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 7px 10px; }

.vbbro-foot { max-width: 46em; margin: clamp(22px, 3vw, 34px) 0 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.vbbro-link, .vbbro-link:link, .vbbro-link:visited { color: var(--acc) !important; text-decoration: none !important;
  border-bottom: 1px solid rgba(180, 85, 43, .35); white-space: nowrap; transition: border-color .18s ease; }
.vbbro-link:hover { border-bottom-color: var(--acc); }

@media (max-width: 520px) { .vbbro-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .vbbro-card { opacity: 1 !important; transform: none !important; transition: none !important; } }
</style>

<script>
(function () {
  /* БРИГАДА: c это цвет заглушки портрета, years это стаж, done это число сданных объектов */
  var CREW = [
    { name: 'Сергей Крылов', role: 'Прораб', years: 16, done: 84, c: '#d9cfc2',
      about: 'Ведёт объект от вскрытия стен до подписания акта. Каждый день на площадке, держит график и закупку, отвечает на звонки заказчика напрямую.',
      tags: ['График по этапам', 'Закупка материалов', 'Приёмка работ'] },
    { name: 'Артём Гончар', role: 'Плиточник', years: 12, done: 61, c: '#cfd8d2',
      about: 'Санузлы и кухни: керамогранит крупного формата, разуклонка под трап, раскладка от центра стены. Работает с гидроизоляцией сам, без передачи другому мастеру.',
      tags: ['Керамогранит', 'Гидроизоляция', 'Тёплый пол'] },
    { name: 'Игорь Пантелеев', role: 'Электрик', years: 14, done: 128, c: '#d4d3c4',
      about: 'Разводка по группам, сборка щита, штробление под кабель. Схему щита и фотографии трасс в стенах передаёт заказчику до штукатурки.',
      tags: ['Сборка щита', 'Схема групп', 'Фото трасс'] },
    { name: 'Наталья Шумилова', role: 'Маляр', years: 9, done: 73, c: '#dfd2cd',
      about: 'Шпаклёвка под покраску и обои, стены под свет лампы, покраска валиком и краскопультом. Принимает плоскость правилом при заказчике.',
      tags: ['Стены под лампу', 'Покраска', 'Обои под стык'] }
  ];

  var roots = document.querySelectorAll('.vbbro');
  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('#vbbro-grid');

    function silhouette(c) {
      return '<svg class="vbbro-ava" viewBox="0 0 76 76" aria-hidden="true" focusable="false">' +
        '<circle cx="38" cy="38" r="38" fill="' + c + '"/>' +
        '<circle cx="38" cy="30" r="12" fill="#fff" opacity=".82"/>' +
        '<path d="M38 46c-11 0-19.5 7-21.5 17.5C22.3 70.2 29.7 74 38 74s15.7-3.8 21.5-10.5C57.5 53 49 46 38 46z" fill="#fff" opacity=".82"/>' +
        '<\/svg>';
    }
    function yearWord(n) { var m = n % 100, k = n % 10; if (m > 10 && m < 20) return 'лет'; if (k === 1) return 'год'; if (k > 1 && k < 5) return 'года'; return 'лет'; }
    function objWord(n) { var m = n % 100, k = n % 10; if (m > 10 && m < 20) return 'объектов'; if (k === 1) return 'объект'; if (k > 1 && k < 5) return 'объекта'; return 'объектов'; }

    grid.innerHTML = CREW.map(function (p) {
      return '<article class="vbbro-card">' + silhouette(p.c) +
        '<h3 class="vbbro-name">' + p.name + '<\/h3>' +
        '<span class="vbbro-role">' + p.role + '<\/span>' +
        '<p class="vbbro-about">' + p.about + '<\/p>' +
        '<div class="vbbro-nums">' +
          '<div><b>' + p.years + '<\/b><span>' + yearWord(p.years) + ' в профессии<\/span><\/div>' +
          '<div><b>' + p.done + '<\/b><span>' + objWord(p.done) + ' сдано<\/span><\/div>' +
        '<\/div>' +
        '<ul class="vbbro-tags">' + p.tags.map(function (t) { return '<li>' + t + '<\/li>'; }).join('') + '<\/ul>' +
        '<\/article>';
    }).join('');

    var cards = Array.prototype.slice.call(grid.querySelectorAll('.vbbro-card'));
    function showAll() { cards.forEach(function (c) { c.classList.add('is-in'); }); }

    if (!('IntersectionObserver' in window)) { showAll(); return; }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (!e.isIntersecting) return;
        var idx = cards.indexOf(e.target);
        e.target.style.transitionDelay = Math.min(idx, 6) * 70 + 'ms';
        e.target.classList.add('is-in');
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -8% 0px' });
    cards.forEach(function (c) { io.observe(c); });
    setTimeout(showAll, 2500);
  }
})();
</script>

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