Figure

<div class="figure">
    <div class="figure__number">
       $123B
    </div>
    <div class="figure__title">
        Leveraged Rate
    </div>
    <div class="figure__text">
        The 1.5% forecasted U.S. leveraged loan default rate is the lowest since 2011 
    </div>
<div>

{{ attach_library('fitch_master/figure') }}
{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  ]
%}
{% block paragraph %}
	{% block content %}
		{{ title_suffix }}
    
    <div class="figure">
      <div class="figure__number">
        {{ content.field_number.0 }}
      </div>
      <div class="figure__title">
        {{ content.field_title }}
      </div>
      <div class="figure__text">
        {{ content.field_text }}
      </div>
    </div>

	{% endblock %}
{% endblock paragraph %}

.figure {
  text-align: var(--figure-text-align);
}
.figure__number {
  margin-bottom: var(--figure-number-margin-bottom);
  font-size: var(--figure-number-size);
  font-weight: var(--figure-number-weight);
  line-height: var(--line-height-2);
  text-transform: var(--filter-number-transform);
  color: var(--figure-number-color);
}
.figure__title {
  margin-bottom: var(--figure-title-margin-bottom);
  font-size: var(--figure-title-size);
  font-weight: var(--figure-title-weight);
  text-transform: var(--filter-title-transform);
  color: var(--figure-title-color);
}
.figure__text {
  margin-bottom: var(--figure-text-margin-bottom);
  font-size: var(--figure-text-size);
  font-weight: var(--figure-text-weight);
  text-transform: var(--filter-text-transform);
  color: var(--figure-text-color);
}

.figure {
    text-align: var(--figure-text-align);
    
    &__number {
        margin-bottom: var(--figure-number-margin-bottom);
        font-size: var(--figure-number-size);
        font-weight: var(--figure-number-weight);
        line-height: var(--line-height-2);
        text-transform: var(--filter-number-transform);
        color: var(--figure-number-color);
    }
    &__title {
        margin-bottom: var(--figure-title-margin-bottom);
        font-size: var(--figure-title-size);
        font-weight: var(--figure-title-weight);        
        text-transform: var(--filter-title-transform);
        color: var(--figure-title-color);
    }
    &__text {
        margin-bottom: var(--figure-text-margin-bottom);
        font-size: var(--figure-text-size);
        font-weight: var(--figure-text-weight);        
        text-transform: var(--filter-text-transform);
        color: var(--figure-text-color);
    }
}