Блок «Преподаватели» для сайта онлайн-школы

<section class="vbpos">
  <div class="vbpos-wrap">
    <div class="vbpos-head">
      <div>
        <h2 class="vbpos-h2">Кто ведёт занятия</h2>
        <p class="vbpos-lead">Не лекторы, а практики: каждый днём работает по специальности, вечером разбирает ваши задания.</p>
      </div>
      <div class="vbpos-arrows">
        <button type="button" class="vbpos-arrow" data-dir="-1" aria-label="Прокрутить влево">
          <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M12 4l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
        <button type="button" class="vbpos-arrow" data-dir="1" aria-label="Прокрутить вправо">
          <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M8 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
      </div>
    </div>
  </div>
  <div class="vbpos-rail" id="vbpos-rail" tabindex="0" role="region" aria-label="Лента преподавателей"></div>
</section>

<style>
.vbpos, .vbpos *, .vbpos *::before, .vbpos *::after { box-sizing: border-box; }
.vbpos {
  --acc: #4b56d2; --ink: #191b2e; --muted: #5f6280; --line: #e3e4ef; --soft: #f4f4fb;
  --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) 0;
}
.vbpos-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); }
.vbpos-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(22px, 2.6vw, 32px); }
.vbpos-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.vbpos-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 38em; }
.vbpos-arrows { display: flex; gap: 8px; flex: 0 0 auto; }
.vbpos-arrow { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line);
  margin: 0; -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 50%; background: #fff !important; color: var(--ink) !important; transition: .18s ease; }
.vbpos-arrow:hover { border-color: var(--acc); color: var(--acc) !important; }
.vbpos-arrow svg { width: 20px; height: 20px; }

.vbpos-rail { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  padding: 4px clamp(20px, 4vw, 60px) 20px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.vbpos-rail:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbpos-card { flex: 0 0 260px; scroll-snap-align: start; background: var(--soft); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.vbpos-card svg.vbpos-ph { display: block; width: 100%; height: auto; }
.vbpos-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.vbpos-name { font-family: var(--fh); font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.vbpos-subj { font-size: 13.5px; font-weight: 600; color: var(--acc); margin: 0 0 10px; }
.vbpos-work { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; flex: 1; }
.vbpos-exp { font-size: 12.5px; color: var(--muted); padding-top: 12px; border-top: 1px solid #e0e1ee; }

@media (max-width: 640px) {
  .vbpos-head { flex-direction: column; align-items: flex-start; }
  .vbpos-card { flex: 0 0 230px; }
}
@media (prefers-reduced-motion: reduce) { .vbpos-rail { scroll-behavior: auto; } }
</style>

<script>
(function () {
  /* ── ПРЕПОДАВАТЕЛИ ── */
  var TEACHERS = [
    { name: 'Антон Ерёмин',   subj: 'SQL и базы данных',   work: 'Ведущий аналитик в маркетплейсе, отвечает за витрины данных для коммерции.', exp: '11 лет практики · 4 года преподаёт', c: '#d9dcf5' },
    { name: 'Мария Хрусталёва', subj: 'Python для анализа', work: 'Data scientist в финтехе, строит модели оттока и скоринга.', exp: '8 лет практики · 3 года преподаёт', c: '#e4dcf0' },
    { name: 'Игорь Панин',    subj: 'Визуализация и BI',   work: 'Руководит BI-командой в ритейле, автор внутреннего гайда по дашбордам.', exp: '13 лет практики · 5 лет преподаёт', c: '#dae7ee' },
    { name: 'Софья Величко',  subj: 'Продуктовая аналитика', work: 'Продуктовый аналитик в сервисе доставки, отвечает за метрики воронки.', exp: '7 лет практики · 2 года преподаёт', c: '#e8e2d6' },
    { name: 'Руслан Тагиров', subj: 'Статистика и A/B',    work: 'Руководитель экспериментов в телеком-компании, проводит до 40 тестов в квартал.', exp: '10 лет практики · 4 года преподаёт', c: '#dbe8dd' },
    { name: 'Дарья Симонова', subj: 'Карьера и собеседования', work: 'Технический рекрутер, за пять лет провела более 900 интервью с аналитиками.', exp: '9 лет практики · 3 года преподаёт', c: '#f0dfe0' },
    { name: 'Кирилл Бабенко', subj: 'Excel и Google Таблицы', work: 'Финансовый аналитик в производственной компании, автоматизирует отчётность.', exp: '12 лет практики · 6 лет преподаёт', c: '#e0e6d9' },
    { name: 'Алиса Ковач',    subj: 'Итоговый проект',     work: 'Ведёт защиту дипломных работ и разбирает их как настоящее тестовое задание.', exp: '9 лет практики · 4 года преподаёт', c: '#dde2ef' }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var rail = root.querySelector('#vbpos-rail');

    /* SVG-заглушка портрета: меняется на <img src="..." alt="..."> */
    function portrait(color, ini) {
      return '<svg class="vbpos-ph" viewBox="0 0 260 200" role="img" aria-label="Портрет преподавателя" focusable="false">' +
        '<rect width="260" height="200" fill="' + color + '"/>' +
        '<circle cx="130" cy="86" r="34" fill="#fff" opacity=".7"/>' +
        '<path d="M74 200c0-30 25-52 56-52s56 22 56 52z" fill="#fff" opacity=".7"/>' +
        '<text x="130" y="95" text-anchor="middle" font-family="inherit" font-size="26" font-weight="700" fill="#5f6280">' + ini + '<\/text><\/svg>';
    }

    rail.innerHTML = TEACHERS.map(function (t) {
      var ini = t.name.split(' ').map(function (p) { return p.charAt(0); }).join('');
      return '<article class="vbpos-card">' + portrait(t.c, ini) +
        '<div class="vbpos-body"><h3 class="vbpos-name">' + t.name + '<\/h3>' +
        '<p class="vbpos-subj">' + t.subj + '<\/p>' +
        '<p class="vbpos-work">' + t.work + '<\/p>' +
        '<p class="vbpos-exp">' + t.exp + '<\/p><\/div><\/article>';
    }).join('');

    function stepBy() {
      var card = rail.querySelector('.vbpos-card');
      return card ? card.offsetWidth + 16 : 280;
    }
    root.querySelectorAll('.vbpos-arrow').forEach(function (b) {
      b.addEventListener('click', function () { rail.scrollLeft += stepBy() * (+b.dataset.dir); });
    });

    /* колесо мыши с зажатым Shift — горизонтальная прокрутка */
    rail.addEventListener('wheel', function (e) {
      if (!e.shiftKey) return;
      e.preventDefault();
      rail.scrollLeft += e.deltaY;
    }, { passive: false });
  }
})();
</script>

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