Что входит в проживание в загородном доме

<section class="vbchp">
  <div class="vbchp-wrap">
    <div class="vbchp-head">
      <h2 class="vbchp-h2">Что уже в стоимости суток</h2>
      <p class="vbchp-lead">Слева то, за что вы платите один раз при бронировании. Справа услуги по запросу с ценой: заказываете их сами и только если нужно.</p>
    </div>

    <div class="vbchp-cols">
      <div class="vbchp-col vbchp-col--in">
        <div class="vbchp-col__top">
          <span class="vbchp-badge">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 13l4 4L19 7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </span>
          <h3 class="vbchp-h3">Входит в цену дома</h3>
          <span class="vbchp-cnt" id="vbchp-cnt-in"></span>
        </div>
        <ul class="vbchp-list" id="vbchp-in">
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v6"/><path d="M3 15h18M6 9V7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2M5 18v2M19 18v2"/></g></svg>
            <b>Постель и полотенца</b><i>Комплект на каждого гостя, при заезде от четырёх ночей меняем в середине срока.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5v6a3 3 0 0 0 6 0V5M7 11v8"/><path d="M17 19V5c-2 .9-3 2.7-3 5.3 0 1.6.9 2.6 3 2.8"/></g></svg>
            <b>Кухня с посудой</b><i>Плита, холодильник, микроволновая печь, чайник и посуда на всю вместимость дома.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21c3.3 0 6-2.4 6-5.5 0-4-6-9.5-6-9.5S6 11.5 6 15.5C6 18.6 8.7 21 12 21z"/><path d="M12 17.5c1.1 0 2-.8 2-1.9 0-1.3-2-3.6-2-3.6"/></g></svg>
            <b>Дрова для мангала и камина</b><i>Колотая берёза лежит в дровянике у дома, растопка и спички на полке.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-6 9 6"/><path d="M5 11v9h14v-9M9 20v-5h6v5"/></g></svg>
            <b>Беседка с мангалом</b><i>Стол на десять мест под крышей, розетка и свет над столом до полуночи.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 16l1.6-5.4A2 2 0 0 1 7.5 9h9a2 2 0 0 1 1.9 1.6L20 16"/><path d="M4 16h16v3H4z"/><circle cx="7.5" cy="19.5" r="1.5"/><circle cx="16.5" cy="19.5" r="1.5"/></g></svg>
            <b>Парковка у дома</b><i>Три места на своём участке, въезд по шлагбауму, территория под видеонаблюдением.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16"/><path d="M8 20V9l8-5v16"/><path d="M8 13h8"/></g></svg>
            <b>Уборка после выезда</b><i>Мыть полы и стирать бельё перед отъездом не нужно, это делает наша бригада.</i>
          </li>
        </ul>
      </div>

      <div class="vbchp-col vbchp-col--pay">
        <div class="vbchp-col__top">
          <span class="vbchp-badge vbchp-badge--pay">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 6v12M6 12h12"/></g></svg>
          </span>
          <h3 class="vbchp-h3">Считаем отдельно</h3>
          <span class="vbchp-cnt" id="vbchp-cnt-pay"></span>
        </div>
        <ul class="vbchp-list vbchp-list--pay" id="vbchp-pay">
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 21V11l7-5 7 5v10z"/><path d="M9.5 16c0-1.5 1.5-2 1.5-3.5M14 16c0-1.5 1.5-2 1.5-3.5"/></g></svg>
            <b>Баня с парной</b><em>2 500 ₽ за вечер</em><i>Топим к вашему приезду, три часа, дрова и веники от нас.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16v4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"/><path d="M8 9c0-1.5 1.5-2 1.5-3.5M14 9c0-1.5 1.5-2 1.5-3.5M6 20l-1 2M18 20l1 2"/></g></svg>
            <b>Купель на улице</b><em>1 800 ₽ за протопку</em><i>Вода греется около двух часов, поэтому скажите о ней при бронировании.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17h16"/><path d="M5 17a7 7 0 0 1 14 0"/><path d="M12 7V5M9 10h6"/></g></svg>
            <b>Завтраки</b><em>590 ₽ с гостя</em><i>Привозим к девяти утра: каша, сырники, яйца, хлеб, чай и кофе.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></g></svg>
            <b>Поздний выезд</b><em>1 900 ₽ за заезд</em><i>До 18:00 вместо полудня, подтверждаем накануне по загрузке дома.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19v-2a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v2"/><circle cx="10" cy="8" r="3.2"/><path d="M18 11h4M20 9v4"/></g></svg>
            <b>Гость сверх вместимости</b><em>900 ₽ за ночь</em><i>Раскладное место с бельём, не больше двух дополнительных на дом.</i>
          </li>
          <li>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 20c0-2.6 2.2-4.4 5-4.4s5 1.8 5 4.4z"/><circle cx="6" cy="9" r="2"/><circle cx="18" cy="9" r="2"/><circle cx="10" cy="6" r="2"/><circle cx="14" cy="6" r="2"/></g></svg>
            <b>Собака или кошка</b><em>700 ₽ за заезд</em><i>Берём в два дома из шести, вольера нет, питомец живёт с вами.</i>
          </li>
        </ul>
      </div>
    </div>

    <div class="vbchp-rules">
      <div><b>с 15:00</b><span>заезд, ключи выдаёт администратор у ворот</span></div>
      <div><b>до 12:00</b><span>выезд, дом принимаем при вас за десять минут</span></div>
      <div><b>с 23:00</b><span>тишина на улице, в домах можно продолжать</span></div>
      <div><b>5 000 ₽</b><span>залог при заезде, возвращаем после осмотра</span></div>
    </div>
  </div>
</section>

<style>
.vbchp, .vbchp *, .vbchp *::before, .vbchp *::after { box-sizing: border-box; }
.vbchp {
  --acc: #4f7d43; --wood: #a4712f; --ink: #1e2a20; --muted: #63755f; --line: #e0e8d9; --soft: #f4f8ef; --sand: #faf4ea;
  --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;
}
.vbchp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbchp-head { max-width: 44em; margin-bottom: clamp(24px, 3.2vw, 42px); }
.vbchp-h2 { font-family: var(--fh); font-size: clamp(25px, 3.3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.022em; margin: 0 0 12px; }
.vbchp-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbchp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.vbchp-col { border-radius: 24px; padding: clamp(20px, 2.4vw, 30px); }
.vbchp-col--in { background: var(--soft); }
.vbchp-col--pay { background: var(--sand); }
.vbchp-col__top { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid rgba(30, 42, 32, .1); }
.vbchp-badge { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--acc); color: #fff; }
.vbchp-badge svg { width: 18px; height: 18px; }
.vbchp-badge--pay { background: var(--wood); }
.vbchp-h3 { font-family: var(--fh); font-size: clamp(18px, 1.9vw, 22px); line-height: 1.2; font-weight: 700; margin: 0; }
.vbchp-cnt { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

.vbchp-list { list-style: none; margin: 0; padding: 0; }
.vbchp-list li { position: relative; padding: 16px 0 16px 40px; border-bottom: 1px solid rgba(30, 42, 32, .09);
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.vbchp-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.vbchp-list li.vbchp-vis { opacity: 1; transform: none; }
.vbchp-list svg { position: absolute; left: 0; top: 17px; width: 24px; height: 24px; color: var(--acc); }
.vbchp-list--pay svg { color: var(--wood); }
.vbchp-list b { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.vbchp-list em { display: inline-block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--wood);
  background: #fff; border-radius: 999px; padding: 4px 11px; margin-left: 8px; white-space: nowrap; }
.vbchp-list i { display: block; font-style: normal; font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 6px; }

.vbchp-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(16px, 2vw, 24px); }
.vbchp-rules div { border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.vbchp-rules b { display: block; font-family: var(--fh); font-size: clamp(20px, 2.2vw, 25px); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--acc); }
.vbchp-rules span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; }

@media (max-width: 520px) {
  .vbchp-list em { margin-left: 0; margin-top: 7px; }
  .vbchp-list b { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .vbchp-list li { opacity: 1; transform: none; transition: none !important; }
}
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var groups = [
      { list: root.querySelector('#vbchp-in'), cnt: root.querySelector('#vbchp-cnt-in'), w: ['позиция', 'позиции', 'позиций'] },
      { list: root.querySelector('#vbchp-pay'), cnt: root.querySelector('#vbchp-cnt-pay'), w: ['услуга', 'услуги', 'услуг'] }
    ];

    function word(n, w) {
      var t = n % 10, h = n % 100;
      if (t === 1 && h !== 11) return w[0];
      if (t > 1 && t < 5 && (h < 12 || h > 14)) return w[1];
      return w[2];
    }

    var all = [];
    for (var g = 0; g < groups.length; g++) {
      if (!groups[g].list) continue;
      var items = groups[g].list.children;
      if (groups[g].cnt) groups[g].cnt.textContent = items.length + ' ' + word(items.length, groups[g].w);
      for (var k = 0; k < items.length; k++) all.push(items[k]);
    }

    function show(el, delay) {
      setTimeout(function () { el.className += ' vbchp-vis'; }, delay);
    }
    function showAll() {
      for (var n = 0; n < all.length; n++) show(all[n], n * 60);
    }

    if (!('IntersectionObserver' in window)) { showAll(); return; }
    var io = new IntersectionObserver(function (entries) {
      for (var e = 0; e < entries.length; e++) {
        if (!entries[e].isIntersecting) continue;
        var pos = all.indexOf(entries[e].target);
        show(entries[e].target, (pos % 6) * 70);
        io.unobserve(entries[e].target);
      }
    }, { rootMargin: '0px 0px -8% 0px' });
    for (var m = 0; m < all.length; m++) io.observe(all[m]);
    setTimeout(showAll, 2600);
  }
})();
</script>

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