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

<section class="vbpfc">
  <div class="vbpfc-wrap">
    <div class="vbpfc-head">
      <h2 class="vbpfc-h2">Клуб в цифрах, которые можно проверить</h2>
      <p class="vbpfc-lead">Площадь, парк оборудования, условия по абонементу и бытовые мелочи вроде парковки. Всё, о чём спрашивают на первой экскурсии, собрано на одном экране.</p>
    </div>

    <div class="vbpfc-grid" id="vbpfc-grid">
      <article class="vbpfc-tile">
        <p class="vbpfc-fig"><b>1 850</b><i>м² двух этажей</i></p>
        <h3>Силовая зона и кардио разведены по этажам</h3>
        <p class="vbpfc-txt">Внизу свободные веса, стойки и помосты, наверху дорожки, эллипсы и зона растяжки. Очередь к стойке в вечерний час обычно не больше одного человека.</p>
      </article>

      <article class="vbpfc-tile">
        <p class="vbpfc-fig"><b>74</b><i>тренажёра</i></p>
        <h3>Гантельный ряд до 60 кг и четыре помоста</h3>
        <p class="vbpfc-txt">Из них 28 кардио с личными экранами, 12 блочных станций и три платформы для тяги. Оборудование обслуживают раз в месяц, неисправное закрывают табличкой в тот же день.</p>
      </article>

      <article class="vbpfc-tile">
        <p class="vbpfc-fig"><b>60</b><i>минут с тренером</i></p>
        <h3>Вводная тренировка входит в любой абонемент</h3>
        <p class="vbpfc-txt">На первой встрече снимают замеры, разбирают технику приседа и тяги, собирают программу на четыре недели. Отдельно за это платить не нужно, записаться можно в день покупки карты.</p>
      </article>

      <article class="vbpfc-tile">
        <p class="vbpfc-fig"><b>30</b><i>дней заморозки</i></p>
        <h3>Абонемент ставится на паузу без объяснений</h3>
        <p class="vbpfc-txt">Годовая карта замораживается на срок до 30 дней, полугодовая до 14. Заявление оформляется на стойке за минуту, дни возвращаются в конец срока действия карты.</p>
      </article>

      <article class="vbpfc-tile vbpfc-tile--acc">
        <p class="vbpfc-fig"><b>0</b><i>бассейнов</i></p>
        <h3>Бассейна в клубе нет, и мы говорим об этом до покупки</h3>
        <p class="vbpfc-txt">Здание без чаши: вместо этого площадь ушла в тренажёрный зал и два зала групповых программ. Если плавание нужно, по нашей карте действует скидка 20 процентов в бассейне через дорогу, 600 метров пешком.</p>
      </article>

      <article class="vbpfc-tile">
        <p class="vbpfc-fig"><b>120</b><i>мест на парковке</i></p>
        <h3>Три часа во дворе бесплатно по номеру машины</h3>
        <p class="vbpfc-txt">Номер вносит администратор на стойке, шлагбаум открывается сам. Вечером после 19:00 свободных мест обычно около трети, ближний ряд отдан гостям клуба.</p>
      </article>

      <article class="vbpfc-tile">
        <p class="vbpfc-fig"><b>240</b><i>шкафчиков</i></p>
        <h3>Раздевалки рассчитаны на вечерний поток</h3>
        <p class="vbpfc-txt">Двенадцать душевых кабин с дверьми, фены, полотенце выдают на входе по карте. Уборка проходит каждые два часа, график висит на двери раздевалки.</p>
      </article>
    </div>

    <p class="vbpfc-foot">Хотите посмотреть залы вживую? <a class="vbpfc-link" href="#zapis">Запишитесь на экскурсию</a>, она занимает 20 минут и ни к чему не обязывает.</p>
  </div>
</section>

<style>
.vbpfc, .vbpfc *, .vbpfc *::before, .vbpfc *::after { box-sizing: border-box; }
.vbpfc {
  --acc: #d6f24b; --acc-dark: #c2df33; --bg: #131518; --panel: #1c1f24; --ink: #f2f4f6; --muted: #939ba5; --line: #2a2e35;
  --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, 86px) 20px;
}
.vbpfc-wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpfc-head { max-width: 44em; margin-bottom: clamp(24px, 3vw, 42px); }
.vbpfc-h2 { font-family: var(--fh); font-size: clamp(27px, 3.6vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; margin: 0 0 14px; color: var(--ink); }
.vbpfc-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbpfc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.vbpfc-tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(20px, 2.2vw, 28px); overflow: hidden;
  opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .22s ease; }
.vbpfc-tile.is-in { opacity: 1; transform: none; }
.vbpfc-tile:hover { border-color: #3a4049; }
.vbpfc-tile::after { content: attr(data-n); position: absolute; right: 18px; top: 16px; font-family: var(--fh); font-size: 12px;
  font-weight: 700; letter-spacing: .08em; color: #4a515c; }
.vbpfc-tile--acc { grid-column: span 2; background: var(--acc); border-color: var(--acc); color: #16181b; }
.vbpfc-tile--acc::after { color: rgba(22, 24, 27, .45); }

.vbpfc-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 14px; }
.vbpfc-fig b { font-family: var(--fh); font-size: clamp(40px, 5.2vw, 62px); line-height: .92; font-weight: 800; letter-spacing: -.04em; color: var(--acc); }
.vbpfc-fig i { font-style: normal; font-size: 13px; line-height: 1.3; color: var(--muted); }
.vbpfc-tile--acc .vbpfc-fig b { color: #16181b; }
.vbpfc-tile--acc .vbpfc-fig i { color: rgba(22, 24, 27, .62); }

.vbpfc-tile h3 { font-family: var(--fh); font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.35; font-weight: 700; margin: 0 0 10px; }
.vbpfc-txt { margin: 0; font-size: 14px; line-height: 1.62; color: var(--muted); }
.vbpfc-tile--acc h3 { font-size: clamp(17px, 1.6vw, 21px); }
.vbpfc-tile--acc .vbpfc-txt { color: rgba(22, 24, 27, .74); }

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

@media (max-width: 620px) { .vbpfc-tile--acc { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) {
  .vbpfc-tile { opacity: 1 !important; transform: none !important; transition: none !important; }
}
</style>

<script>
(function () {
  var PREFIX = '';   /* приставка к номеру плитки, например 'п' даст п01; пусто - только цифры */

  var roots = document.querySelectorAll('.vbpfc');
  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('.vbpfc-tile'));

    /* нумерация проставляется по порядку в разметке: добавили плитку, номера пересчитались сами */
    tiles.forEach(function (tile, n) {
      var num = n + 1;
      tile.setAttribute('data-n', PREFIX + (num < 10 ? '0' + num : num));
    });

    function showAll() { tiles.forEach(function (t) { t.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 = tiles.indexOf(e.target);
        e.target.style.transitionDelay = Math.min(n % 3, 3) * 80 + 'ms';
        e.target.classList.add('is-in');
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -10% 0px' });
    tiles.forEach(function (t) { io.observe(t); });
    setTimeout(showAll, 2600);
  }
})();
</script>

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