Title

<h1 class="heading--1">
    Heading 1
</h1>
<h2 class="heading--2">
    Heading 2
</h2>
<h3 class="heading--3">
    Heading 3
</h3>
<h4 class="heading--4">
    Heading 4
</h4>
<h5 class="heading--5">
    Heading 5
</h5>
<h6 class="heading--6">
    Heading 6
</h6>
<h1 class="heading--1 ta--left">
    Heading 1
</h1>

{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  ]
%}
{% block paragraph %}
  {% if content.field_title.0 is not empty %}
    <h{{ content.field_heading_level.0 }} class="heading--{{ content.field_heading_style.0 }}">
    {% if content.field_cta['#items']|length == 1 %}
      {% if content.field_cta.0 is not empty %}
        <a class="{% if content.field_cta[0]['#options'].attributes.overlay == "_yes" %}overlay{% endif %}" href="{{ content.field_cta[0]['#url'] }}"
        
        {% if content.field_cta[0]['#options'].attributes.target is not empty %}
          target="{{ content.field_cta[0]['#options'].attributes.target }}"          
          {% endif %}

          {% if content.field_cta[0]['#options'].attributes.rel is not empty %}
          rel="{{ content.field_cta[0]['#options'].attributes.rel }}"
          {% endif %}

          {% if content.field_cta[0]['#options'].attributes.title is not empty %}
          title="{{ content.field_cta[0]['#options'].attributes.title }}"
          {% endif %}

          {% if content.field_cta[0]['#options'].attributes.dataoverlay is not empty %}
          data-overlay="{{ content.field_cta[0]['#options'].attributes.dataoverlay }}"
          {% endif %}
          
          {% if content.field_cta[0]['#options'].attributes.dataformtitle is not empty %}
          data-form-title="{{ content.field_cta[0]['#options'].attributes.dataformtitle }}"
          {% endif %}

          {% if content.field_cta[0]['#options'].attributes.dataformthankyou is not empty %}
          data-form-thankyou="{{ content.field_cta[0]['#options'].attributes.dataformthankyou }}"
          {% endif %}

          {% if content.field_cta[0]['#options'].attributes.datatitle is not empty %}
          data-title="{{ content.field_cta[0]['#options'].attributes.datatitle }}"
          {% endif %}

          {% if content.field_cta[0]['#options'].attributes.dataurl is not empty %}
          data-url="{{ content.field_cta[0]['#options'].attributes.dataurl }}"
          {% endif %}  
        >
      {% endif %}
    {% endif %}
        {{ content.field_title.0 }}
    {% if content.field_cta['#items']|length == 1 %}
      {% if content.field_cta.0 is not empty %}
        </a>
      {% endif %}
    {% endif %}
    </h{{ content.field_heading_level.0 }}>
  {% endif %}
{% endblock paragraph %}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: var(--spacing-1);
}

$headings: (1,2,3,4,5,6);
@each $heading in $headings {
  h#{$heading},
  .heading--#{$heading} {
    font-size: var(--heading-size);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
  }
}

h6,
.heading--6,
.heading--sub {
  text-transform: uppercase;
}
.heading--sub {
  margin-bottom: var(--spacing-1);
  font-size: var(--heading-tag-size);
  font-weight: var(--bold);
}
.heading--tag {
  color: var(--heading-tag-color);
}

.heading--number {
  margin-bottom: 1rem;
  font-size: 6rem;
  font-weight: 100;
  line-height: 1;
}
.heading--no {
  position: relative;
  margin-right: 0.9rem;
  font-weight: var(--bold);

  &:after {
    content: '';
    position: absolute;
    bottom: -0.2rem;
    left: 0;
    width: 100%;
    border-bottom: 0.1rem solid;
    border-color: inherit;
  }
}

.heading--text {
  font-size: 1.8rem;
}

*[class|='heading'] a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;

  &:hover,
  &:focus {
    text-decoration: none;
  }
}

@include mq-5 {
  .heading--1 {
    font-size: 3.6rem;
  }
  .heading--2 {
    font-size: 3.2rem;
  }
}