{% set class_map = {
  font_color: {
    dark: 'hg:text-body-text-dark',
    light: 'hg:text-white',
    brand: 'hg:text-brand',
    'brand-light': 'hg:text-brand-light',
    accent: 'hg:text-accent',
    'accent-light': 'hg:text-accent-light'
  }
} %}
{# For an explanation of the [&>*:] syntax @see https://medium.com/@replynamanjain/tailwind-css-targeting-child-elements-b60c0ca11652 #}
<div
  class="{{ [
    'rich-text',
    'hg:text-base hg:lg:text-lg hg:2xl:text-xl',
    'hg:[&_ol]:my-4 hg:[&_ul]:my-4 hg:[&_li]:hg:mb-1',
    'hg:[&_ol]:list-decimal',
    'hg:[&>*:first-child]:mt-0 hg:[&>*:last-child]:mb-0',
    class_map['font_color'][font_color] ?? font_color
  ]|join(' ') }}{{ font_size_multiplier == 'default' ? '' : ' ' ~ font_size_multiplier }}"
>
  {{ text }}
</div>
