Сверстать HTML код по образу и подобию (Parallax)

Добрый день!

Необходимо сверстать следующий код:

<div class="paragraph paragraph--type--svx-sim paragraph--view-mode--default">
  <div class="row">
    <div class="col-lg-6">
      <div class="large-image"
           style="background-image: url('/sites/default/files/2023-04/DA_RENDER_FOYER-IMAGE-WEB.jpg');display: block;width: 500px;height: 500px;">
      </div>
      <div class="small-image"
           style="background-image: url('/sites/default/files/2023-04/DA_RENDER_PARK-IMAGE_web_square.jpg')">
      </div>
    </div>
    <div class="col-lg-6">
      <div class="field field--name-field-svx-sim-title field--type-string field--label-hidden field__item">Plan Your
        Visit
      </div>
      <div
        class="clearfix text-formatted field field--name-field-svx-sim-body field--type-text field--label-hidden field__item">
        All the information you need for your visit to the Pavilion.
      </div>
      <div class="field field--name-field-svx-sim-link field--type-link field--label-hidden field__item"><a
        href="rbc.ru">Find out more</a></div>
    </div>
  </div>
</div>

Таким образом, чтобы он выглядел и вёл себя точно также (Parallax) как на сайте thepavilionarts.au

Требования:
1. Чистый SCSS с классом .paragraph--type--svx-sim на верхнем уровне и все остальные стили вложенные.
2. При изменении разметки необходимо выделить цветом наподобие гитхаба добавленные/изменённые элементы, чтобы я мог легко внести изменения в шаблон.
3. Если оригинальный сайт не использует JS для этого элемента – также не использовать.
4. Желательно продемонстрировать результат на codepen
5. Вынести в начало SCSS и определить переменные, которые будут использоваться, например фон кнопки, цвета, размеры и жирность шрифтов, паддинги между элементами.

Можно:
1. Добавить/изменить элемент/класс в структуре, но желательно по минимуму
2. Не добавлять анимацию внутри кнопки, но тень при наведении добавить.

Скидывайте свои котировки на данную работу.