<div class="layout-center-wrap bg-primary50 dark:bg-primary800">
  <div class="layout-wrap">
    <div class="grid-var grid-var-tablet gap20" style="--grid-columns: 10fr 5fr; --grid-columns-tablet: auto;">
      <div>
        <h1 class="t-primary800 dark:t-primary200 mar40-t t-georgia t400 t300-tablet">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
        
        <div class="t-primary800 dark:t-primary200 mar20-t">Donec euismod hendrerit condimentum. Suspendisse lacus leo, iaculis vel urna sed, aliquam faucibus quam.</div>
        
        <div class="mar30-tb"><a _href="" class="button bg-primary800 dark:bg-primary700 pad15">Nullam scelerisque ultricies</a></div>
      </div>

      <div class="t-right t-center-tablet flex-as-center">
        <img src="https://placehold.co/350x500" alt="Placeholder">
      </div>
    </div>
  </div>
</div>

<div class="layout-center-wrap flex bg-no-repeat bg-position-center bg-size-cover" style="min-height: 600px; background-image: url(https://placehold.co/1400x600);">
    <div class="w100 bg-op40">
        <div class="layout-wrap h100 flex-column flex-ac-center">
            <div class="t-primary100 t300 t-center">Lorem ipsum dolor sit amet</div>
            <div class="t-primary100 t120 t-center mar30-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
            <div class="t-center mar30-t"><a class="button" href="#">Lorem</a></div>
        </div>
    </div>
</div>