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

<section class="vbkvk">
  <div class="vbkvk-wrap">
    <div class="vbkvk-head">
      <h2 class="vbkvk-h2">Врачи клиники</h2>
      <p class="vbkvk-lead">Нажмите на карточку — увидите образование, сертификаты и то, с чем врач работает чаще всего.</p>
    </div>
    <div class="vbkvk-grid" id="vbkvk-grid"></div>
  </div>
</section>

<style>
.vbkvk, .vbkvk *, .vbkvk *::before, .vbkvk *::after { box-sizing: border-box; }
.vbkvk {
  --acc: #1c7f8c; --acc-dark: #166874; --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: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkvk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkvk-head { max-width: 44em; margin-bottom: clamp(24px, 3vw, 40px); }
.vbkvk-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkvk-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbkvk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.vbkvk-card { perspective: 1400px; border: 0; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: none !important;
  cursor: pointer; font: inherit; text-align: left; min-height: 380px; }
.vbkvk-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 22px; }
.vbkvk-in { position: relative; width: 100%; height: 100%; min-height: 380px; transition: transform .55s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d; }
.vbkvk-card[aria-pressed="true"] .vbkvk-in { transform: rotateY(180deg); }
.vbkvk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.vbkvk-back { transform: rotateY(180deg); padding: 22px; }

.vbkvk-photo { display: block; width: 100%; aspect-ratio: 4 / 3; background: #dce9ea; }
.vbkvk-info { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.vbkvk-name { font-family: var(--fh); font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.vbkvk-spec { font-size: 14px; color: var(--acc); font-weight: 500; margin: 0 0 10px; }
.vbkvk-exp { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.vbkvk-flip { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--acc); }
.vbkvk-flip svg { width: 15px; height: 15px; }

.vbkvk-back h4 { font-family: var(--fh); font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.vbkvk-dl { margin: 0 0 14px; }
.vbkvk-dl dt { font-size: 11.5px; color: #8ba0a3; margin-bottom: 2px; }
.vbkvk-dl dd { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.vbkvk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.vbkvk-tags span { font-size: 11.5px; background: var(--soft); border-radius: 999px; padding: 4px 10px; color: var(--muted); }
.vbkvk-cta, .vbkvk-cta:link, .vbkvk-cta:visited, .vbkvk-cta:active, .vbkvk-cta:focus { display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; border-radius: 10px; font-size: 15px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkvk-cta:hover { background: var(--acc-dark); color: #fff !important; }

@media (prefers-reduced-motion: reduce) { .vbkvk-in { transition: none !important; } }
</style>

<script>
(function () {
  var CTA_HREF = '#zapis';

  /* ── ВРАЧИ ── */
  var DOCTORS = [
    { name: 'Ирина Ковалёва', spec: 'Терапевт, эндодонтист', exp: 'В профессии 16 лет · высшая категория',
      edu: 'УГМУ, стоматология, 2008. Ординатура по терапевтической стоматологии, 2010',
      cert: 'Эндодонтия под микроскопом (2019), реставрация фронтальной группы (2022)',
      tags: ['Лечение каналов', 'Реставрации', 'Перелечивание'], color: '#cfe3e5' },
    { name: 'Артём Лапин', spec: 'Хирург-имплантолог', exp: 'В профессии 13 лет · более 2 000 имплантов',
      edu: 'ПГМУ, стоматология, 2011. Ординатура по хирургической стоматологии, 2013',
      cert: 'Straumann Advanced (2018), костная пластика и синус-лифтинг (2021)',
      tags: ['Имплантация', 'Удаление восьмёрок', 'Костная пластика'], color: '#d7e2ea' },
    { name: 'Наталья Гущина', spec: 'Ортодонт', exp: 'В профессии 11 лет · 400 завершённых кейсов',
      edu: 'КГМУ, стоматология, 2013. Ординатура по ортодонтии, 2015',
      cert: 'Damon System (2017), Invisalign Provider (2020)',
      tags: ['Брекеты', 'Элайнеры', 'Детский прикус'], color: '#e0dcea' },
    { name: 'Сергей Мальцев', spec: 'Ортопед', exp: 'В профессии 18 лет · высшая категория',
      edu: 'УГМУ, стоматология, 2006. Ординатура по ортопедической стоматологии, 2008',
      cert: 'Цифровой протокол протезирования (2019), полная реабилитация (2023)',
      tags: ['Коронки и виниры', 'Протезы', 'Полная реабилитация'], color: '#dfe6d9' },
    { name: 'Полина Данилова', spec: 'Детский стоматолог', exp: 'В профессии 8 лет',
      edu: 'СамГМУ, стоматология, 2016. Ординатура по детской стоматологии, 2018',
      cert: 'Адаптационный приём (2019), лечение в седации (2022)',
      tags: ['Дети от года', 'Адаптация', 'Герметизация фиссур'], color: '#f0e0da' },
    { name: 'Дмитрий Шилов', spec: 'Пародонтолог', exp: 'В профессии 14 лет',
      edu: 'РНИМУ, стоматология, 2010. Ординатура по терапевтической стоматологии, 2012',
      cert: 'Хирургическая пародонтология (2018), лазерные протоколы (2021)',
      tags: ['Пародонтит', 'Гигиена', 'Шинирование'], color: '#e6e2d5' }
  ];

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

    /* SVG-заглушка портрета: замените на <img src="..." alt="..."> когда появятся фото */
    function portrait(color, initials) {
      return '<svg class="vbkvk-photo" viewBox="0 0 200 150" role="img" aria-label="Портрет врача" focusable="false">' +
        '<rect width="200" height="150" fill="' + color + '"/>' +
        '<circle cx="100" cy="62" r="27" fill="#ffffff" opacity=".75"/>' +
        '<path d="M58 150c0-24 19-42 42-42s42 18 42 42z" fill="#ffffff" opacity=".75"/>' +
        '<text x="100" y="70" text-anchor="middle" font-family="inherit" font-size="22" font-weight="700" fill="#5f7276">' + initials + '<\/text><\/svg>';
    }

    grid.innerHTML = DOCTORS.map(function (d) {
      var ini = d.name.split(' ').map(function (p) { return p.charAt(0); }).join('');
      return '<button type="button" class="vbkvk-card" aria-pressed="false"><span class="vbkvk-in">' +
        '<span class="vbkvk-face">' + portrait(d.color, ini) +
        '<span class="vbkvk-info"><span class="vbkvk-name">' + d.name + '<\/span>' +
        '<span class="vbkvk-spec">' + d.spec + '<\/span>' +
        '<span class="vbkvk-exp">' + d.exp + '<\/span>' +
        '<span class="vbkvk-flip">Образование и сертификаты' +
        '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><\/svg>' +
        '<\/span><\/span><\/span>' +
        '<span class="vbkvk-face vbkvk-back"><h4>' + d.name + '<\/h4>' +
        '<dl class="vbkvk-dl"><dt>Образование<\/dt><dd>' + d.edu + '<\/dd>' +
        '<dt>Повышение квалификации<\/dt><dd>' + d.cert + '<\/dd><\/dl>' +
        '<span class="vbkvk-tags">' + d.tags.map(function (t) { return '<span>' + t + '<\/span>'; }).join('') + '<\/span>' +
        '<a class="vbkvk-cta" href="' + CTA_HREF + '">Записаться к врачу<\/a><\/span>' +
        '<\/span><\/button>';
    }).join('');

    grid.querySelectorAll('.vbkvk-card').forEach(function (c) {
      c.addEventListener('click', function (e) {
        if (e.target.closest('a')) return;   /* клик по кнопке записи не переворачивает карточку */
        c.setAttribute('aria-pressed', c.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');
      });
    });
  }
})();
</script>

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