HR: Surface 2

<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Horizontal Rule
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <h3 class="celestial-blue">Default Size</h3>
  <hr {{#if modifier}}class="{{modifier}}"{{/if}}>
  <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-1</span></h3>
  <hr class="{{#if modifier}}{{modifier}}{{/if}} size-1">
  <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-2</span></h3>
  <hr class="{{#if modifier}}{{modifier}}{{/if}} size-2">
  <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-3</span></h3>
  <hr class="{{#if modifier}}{{modifier}}{{/if}} size-3">
  <h3 class="celestial-blue">Size <span class="token string" style="font-size: var(--font-size-2)">size-4</span></h3>
  <hr class="{{#if modifier}}{{modifier}}{{/if}} size-4">
</div>