Блок преимуществ онлайн-школы для сайта курса

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

    <div class="vbpsh-bento">
      <article class="vbpsh-hero">
        <h3>Домашние задания читает преподаватель и объясняет ошибки</h3>
        <p>Каждую работу смотрит практикующий специалист: отмечает, что сделано верно, где решение сломается на настоящих данных и что переписать. Разбор приходит текстом в личный кабинет, спорные места разбираем голосом на общей встрече по четвергам.</p>
        <div class="vbpsh-stats">
          <div><b data-num="18" data-suf=" ч">0</b><span>средний срок проверки работы</span></div>
          <div><b data-num="3" data-suf="">0</b><span>захода на доработку без доплаты</span></div>
          <div><b data-num="96" data-suf=" %">0</b><span>работ с письменным разбором</span></div>
        </div>
      </article>

      <article class="vbpsh-tile">
        <h3>Записи остаются после выпуска</h3>
        <p>Занятие появляется в кабинете в день эфира вместе с конспектом и файлами. Доступ к материалам держится 24 месяца после окончания потока, скачивать можно всё.</p>
      </article>

      <article class="vbpsh-tile">
        <h3>Куратор отвечает в будни до восьми вечера</h3>
        <p>Помогает разобраться с установкой программ, напоминает о сроках сдачи и возвращает в поток тех, кто выпал на пару недель. Ответ приходит в течение рабочего дня.</p>
      </article>

      <article class="vbpsh-tile vbpsh-tile--w">
        <h3>Практика на задачах из работы</h3>
        <p>Проекты собраны из запросов компаний, которые берут выпускников: выгрузка с ошибками, спорное требование заказчика, срок в два дня. К концу курса в портфолио четыре готовые работы.</p>
      </article>

      <article class="vbpsh-tile vbpsh-tile--w">
        <h3>Выход на работу после курса</h3>
        <p>Разбираем резюме и сопроводительное письмо, проводим тренировочное собеседование с записью и передаём анкету компаниям, которые ищут начинающих специалистов.</p>
      </article>

      <article class="vbpsh-tile vbpsh-tile--w">
        <h3>Оплата частями без переплаты</h3>
        <p>Стоимость делится на 6, 10 или 12 платежей, процент банка берёт на себя школа. Первый платёж уходит через месяц после старта потока.</p>
      </article>
    </div>

    <p class="vbpsh-foot">Программу и расписание ближайшего потока присылаем в ответ на заявку: <a class="vbpsh-link" href="#programma">посмотреть программу</a></p>
  </div>
</section>

<style>
.vbpsh, .vbpsh *, .vbpsh *::before, .vbpsh *::after { box-sizing: border-box; }
.vbpsh {
  --acc: #4b56d2; --acc-dark: #3d47b5; --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) 20px;
}
.vbpsh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpsh-head { max-width: 46em; margin-bottom: clamp(24px, 3vw, 40px); }
.vbpsh-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; }
.vbpsh-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbpsh-bento { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vbpsh-hero, .vbpsh-tile { border-radius: 20px; padding: clamp(22px, 2.4vw, 32px);
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.vbpsh-hero.is-in, .vbpsh-tile.is-in { opacity: 1; transform: none; }
.vbpsh-hero { background: var(--ink); color: #fff; display: flex; flex-direction: column; }
.vbpsh-hero h3 { font-family: var(--fh); font-size: clamp(20px, 2.3vw, 27px); line-height: 1.24; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; }
.vbpsh-hero p { font-size: 15.5px; line-height: 1.65; color: #b9bcd4; margin: 0 0 auto; }
.vbpsh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.vbpsh-stats b { display: block; font-family: var(--fh); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.vbpsh-stats span { display: block; font-size: 12.5px; line-height: 1.45; color: #9ea1bd; margin-top: 6px; }
.vbpsh-tile { background: var(--soft); }
.vbpsh-tile h3 { font-family: var(--fh); font-size: 17.5px; line-height: 1.3; font-weight: 600; margin: 0 0 10px; }
.vbpsh-tile h3::before { content: ''; display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--acc); margin-bottom: 14px; }
.vbpsh-tile p { font-size: 14.5px; line-height: 1.62; color: var(--muted); margin: 0; }
.vbpsh-foot { margin: clamp(20px, 2.4vw, 30px) 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.vbpsh-link, .vbpsh-link:link, .vbpsh-link:visited { color: var(--acc) !important; text-decoration: underline; }
.vbpsh-link:hover { color: var(--acc-dark) !important; }

@media (min-width: 700px) {
  .vbpsh-bento { grid-template-columns: repeat(6, 1fr); }
  .vbpsh-hero { grid-column: span 6; }
  .vbpsh-tile { grid-column: span 3; }
  .vbpsh-tile--w { grid-column: span 2; }
}
@media (min-width: 1040px) {
  .vbpsh-hero { grid-column: span 3; grid-row: span 2; }
  .vbpsh-tile { grid-column: span 3; }
  .vbpsh-tile--w { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .vbpsh-hero, .vbpsh-tile { opacity: 1 !important; transform: none !important; transition: none !important; }
}
</style>

<script>
(function () {
  var roots = document.querySelectorAll('.vbpsh');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var tiles = Array.prototype.slice.call(root.querySelectorAll('.vbpsh-hero, .vbpsh-tile'));
    var nums = Array.prototype.slice.call(root.querySelectorAll('.vbpsh-stats b'));
    var calm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function setFinal(el) { el.textContent = el.getAttribute('data-num') + (el.getAttribute('data-suf') || ''); }

    function runNum(el) {
      if (el.__done) return; el.__done = 1;
      var to = +el.getAttribute('data-num') || 0, suf = el.getAttribute('data-suf') || '';
      if (calm || to < 4) { setFinal(el); return; }
      var start = 0, dur = 900, t0 = Date.now();
      var timer = setInterval(function () {
        var k = Math.min(1, (Date.now() - t0) / dur);
        var val = Math.round(start + (to - start) * (1 - Math.pow(1 - k, 3)));
        el.textContent = val + suf;
        if (k === 1) clearInterval(timer);
      }, 40);
    }

    function showAll() {
      tiles.forEach(function (t) { t.classList.add('is-in'); });
      nums.forEach(runNum);
    }

    if (!('IntersectionObserver' in window)) { showAll(); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) {
        if (!e.isIntersecting) return;
        var i = tiles.indexOf(e.target);
        e.target.style.transitionDelay = Math.min(i, 5) * 70 + 'ms';
        e.target.classList.add('is-in');
        if (e.target.className.indexOf('vbpsh-hero') > -1) nums.forEach(runNum);
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -10% 0px' });
    tiles.forEach(function (t) { io.observe(t); });
    setTimeout(showAll, 2600);
  }
})();
</script>

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