Блок «Команда кухни» для сайта ресторана

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

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

    <p class="vbkkh-foot">Кухня открыта для гостей: попросите официанта показать цех перед закатом или <a class="vbkkh-link" href="#menu">загляните в меню</a>.</p>
  </div>
</section>

<style>
.vbkkh, .vbkkh *, .vbkkh *::before, .vbkkh *::after { box-sizing: border-box; }
.vbkkh {
  --acc: #8a5a2b; --acc-dark: #6f4720; --ink: #241f19; --muted: #6d645a; --line: #e7ddcd; --soft: #f7f1e6; --bg: #fbf7f0;
  --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, 84px) 20px;
}
.vbkkh-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkkh-head { max-width: 46em; margin-bottom: clamp(24px, 3vw, 40px); }
.vbkkh-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; }
.vbkkh-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbkkh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.vbkkh-card { display: flex; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .22s ease; }
.vbkkh-card.is-in { opacity: 1; transform: none; }
.vbkkh-card:hover { box-shadow: 0 10px 30px rgba(60, 44, 24, .09); }

.vbkkh-pic { position: relative; flex: 0 0 150px; align-self: stretch; }
.vbkkh-svg { display: block; width: 100%; height: 100%; }
.vbkkh-role { position: absolute; left: 10px; bottom: 10px; background: var(--acc); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.2; padding: 6px 10px; }

.vbkkh-body { flex: 1; min-width: 0; padding: clamp(18px, 2.2vw, 24px); display: flex; flex-direction: column; }
.vbkkh-name { font-family: var(--fh); font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 12px; }
.vbkkh-line { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.vbkkh-line span { display: block; font-size: 10.5px; letter-spacing: .07em; color: #ab9e8c; margin-bottom: 3px; }
.vbkkh-dish { margin: 0 0 16px; background: var(--soft); border-radius: 13px; padding: 12px 14px; }
.vbkkh-dish span { display: block; font-size: 10.5px; letter-spacing: .07em; color: #ab9e8c; margin-bottom: 4px; }
.vbkkh-dish b { display: block; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--acc); }
.vbkkh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.vbkkh-stats b { display: block; font-family: var(--fh); font-size: 18px; font-weight: 700; line-height: 1.1; }
.vbkkh-stats i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 4px; }

.vbkkh-foot { margin: clamp(22px, 2.6vw, 32px) 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.vbkkh-link, .vbkkh-link:link, .vbkkh-link:visited { color: var(--acc) !important; text-decoration: underline; }
.vbkkh-link:hover { color: var(--acc-dark) !important; }

@media (max-width: 460px) {
  .vbkkh-grid { grid-template-columns: minmax(0, 1fr); }
  .vbkkh-card { flex-direction: column; }
  .vbkkh-pic { flex: none; height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .vbkkh-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}
</style>

<script>
(function () {
  /* ── ПОВАРА: photo пустой, значит рисуется заглушка цвета tint; hat: 1 - поварской колпак ── */
  var COOKS = [
    { name: 'Артём Гладков', role: 'Шеф-повар', tint: '#efdfc9', hat: 1, photo: '',
      before: 'Двенадцать лет в ресторанах Петербурга, последние четыре из них су-шефом в «Соли». Запускал кухню гастробара на Рубинштейна.',
      dish: 'Говяжья щека, томлённая шесть часов, с пюре из корня сельдерея',
      s1: '16 лет', s1n: 'на кухне', s2: 'с 2021', s2n: 'в нашей команде' },
    { name: 'Наиля Хабибуллина', role: 'Су-шеф', tint: '#e3e6d5', hat: 1, photo: '',
      before: 'Горячий цех отеля на 180 номеров, затем кейтеринг: банкеты до 300 гостей с выездной кухней.',
      dish: 'Паста с уткой конфи, тесто раскатывается вручную каждое утро',
      s1: '9 лет', s1n: 'на кухне', s2: '4 смены', s2n: 'ведёт лично в неделю' },
    { name: 'Вера Осипова', role: 'Кондитер', tint: '#f2dcd7', hat: 0, photo: '',
      before: 'Своя пекарня на восемь позиций, стажировка у московского шоколатье. Работает на закваске и сезонных ягодах.',
      dish: 'Медовик на гречишном мёде с солёной карамелью',
      s1: '11 лет', s1n: 'в кондитерском деле', s2: '14 позиций', s2n: 'десертной карты' },
    { name: 'Кирилл Дёмин', role: 'Бариста', tint: '#dfe2ea', hat: 0, photo: '',
      before: 'Пять лет за стойкой городской обжарочной, призёр региональных соревнований бариста 2023 года.',
      dish: 'Кофе на груше и кардамоне, зерно обжарки прошлой недели',
      s1: '6 лет', s1n: 'за стойкой', s2: '3 зерна', s2n: 'в постоянной обжарке' }
  ];

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

    function placeholder(tint, hat) {
      var cap = hat ? '<path d="M50 52c-9-4-8-18 3-19 3-9 20-11 26-2 12-2 18 12 9 20z" fill="#fff" opacity=".92"/>' +
        '<rect x="50" y="50" width="50" height="10" rx="4" fill="#fff" opacity=".92"/>' : '';
      return '<svg class="vbkkh-svg" viewBox="0 0 150 200" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">' +
        '<rect width="150" height="200" fill="' + tint + '"/>' +
        cap +
        '<circle cx="75" cy="88" r="29" fill="#fff" opacity=".9"/>' +
        '<path d="M20 200c0-30 25-46 55-46s55 16 55 46z" fill="#fff" opacity=".9"/>' +
        '<path d="M0 168c22-9 40-9 58 2" stroke="#fff" stroke-opacity=".45" stroke-width="3" fill="none"/><\/svg>';
    }

    grid.innerHTML = COOKS.map(function (p) {
      var pic = p.photo ? '<img class="vbkkh-svg" src="' + p.photo + '" alt="' + p.name + ', ' + p.role + '">' : placeholder(p.tint, p.hat);
      return '<article class="vbkkh-card">' +
        '<div class="vbkkh-pic">' + pic + '<span class="vbkkh-role">' + p.role + '<\/span><\/div>' +
        '<div class="vbkkh-body">' +
        '<h3 class="vbkkh-name">' + p.name + '<\/h3>' +
        '<p class="vbkkh-line"><span>ДО НАШЕЙ КУХНИ<\/span>' + p.before + '<\/p>' +
        '<p class="vbkkh-dish"><span>ФИРМЕННАЯ ПОЗИЦИЯ<\/span><b>' + p.dish + '<\/b><\/p>' +
        '<div class="vbkkh-stats">' +
        '<div><b>' + p.s1 + '<\/b><i>' + p.s1n + '<\/i><\/div>' +
        '<div><b>' + p.s2 + '<\/b><i>' + p.s2n + '<\/i><\/div>' +
        '<\/div><\/div><\/article>';
    }).join('');

    var cards = Array.prototype.slice.call(grid.querySelectorAll('.vbkkh-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 n = cards.indexOf(e.target);
        e.target.style.transitionDelay = Math.min(n, 5) * 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-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.