Key Point

// FULL WIDTH
<section class="section section--spacing-above section--spacing-below">
   <div class="key-point ta--2" style="background-color: #174174;">
      <div class="wrapper--2">
         <div class="heading--sub">Sub Title</div>
         <h3 class="heading--1">Title</h3>
         <p>Key Point text</p>
         <div class="button__wrapper">
            <a class="button button--1" href="/">
            Link Text
            </a>
         </div>
      </div>
   </div>
</section>

// INTRO
<section class="section section--spacing-above section--spacing-below">
  <div class="key-point key-point--intro wrapper--2" style="background-color: #dde3f2;">
    <div class="">
      <p>View our extensive list of upcoming free webinars. Just part of our commitment to ensuring your learning journey keeps on track and you stay informed about the latest industry developments during this unprecedented time.</p>
    </div>
  </div>
</section>

{{ attach_library('fitch_master/key-point') }}
{%
	set classes = [
	  'paragraph',
	  'paragraph--type--' ~ paragraph.bundle|clean_class,
	  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
	  not paragraph.isPublished() ? 'paragraph--unpublished'
	]
  %}
{% if paragraph.field_key_point_intro.value != 1 %}
	{% set keyPointClass = 'key-point ta--2' %}  
	{% set keyPointWrapper = 'wrapper--2' %}  
{% elseif paragraph.field_key_point_intro.value == 1 %}
	{% set keyPointClass = 'key-point key-point--intro wrapper--2' %}
	{% set keyPointWrapper = '' %}  
{% endif %}

{% block paragraph %}
  {% block content %}
	  {{ title_suffix }}

		<section
			{% include '@fitch_master/parts/paragraph--id--section-name.html.twig' %}
			class="
				section
				{% include '@fitch_master/parts/paragraph--class--section-name.html.twig' %}
				{% include '@fitch_master/parts/paragraph--class--section-spacing-top.html.twig' %}
				{% include '@fitch_master/parts/paragraph--class--section-spacing-bottom.html.twig' %}
			"
		>
			<div 
				class="{{ keyPointClass }}"
				style="
					{% include '@fitch_master/parts/paragraph--style--background-color.html.twig' %}
					{% include '@fitch_master/parts/paragraph--style--text-color.html.twig' %}
				"
			>				
				<div class="{{ keyPointWrapper }}">
					{% include '@fitch_master/paragraph/paragraph--sub-title.html.twig' %}			  
					{% if content.field_title.0 is not empty %}<h3 class="heading--1">{{ content.field_title }}</h3>{% endif %}		  
					{% include '@fitch_master/paragraph/paragraph--text.html.twig' %}			  
					{% include '@fitch_master/paragraph/paragraph--call-to-action.html.twig' %}  
					{% include '@fitch_master/paragraph/paragraph--block-reference.html.twig' %}				
				</div>
			</div>
		</section>

		{% include '@fitch_master/parts/has_header.html.twig' %}

	{% endblock %}
{% endblock paragraph %}

.key-point {
  width: 100vw;
  margin: var(--key-point-margin);
  padding: var(--key-point-padding);
  color: var(--inverted-text-color);
}
.key-point *[class*=heading] {
  color: inherit;
}
.key-point p {
  font-size: var(--key-point-font-size);
}
.key-point--intro {
  margin: auto;
  padding: var(--spacing-6);
  color: inherit;
}
.key-point--intro p {
  margin: 0;
  font-size: 2rem;
  line-height: 1.4;
}
.key-point--intro p::first-letter {
  padding-top: 3px;
  padding-right: 2px;
  float: left;
  font-size: 62px;
  font-weight: 600;
  line-height: 50px;
  color: var(--primary-2);
}

.key-point {
  width: 100vw;
  margin: var(--key-point-margin);
  padding: var(--key-point-padding);
  color: var(--inverted-text-color);

  *[class*="heading"] {
    color: inherit;
  }

  p {
    font-size: var(--key-point-font-size);
  }

  &--intro {
    margin: auto;
    padding: var(--spacing-6);
    color: inherit;
  
    p {
      margin: 0;
      font-size: 2rem;
      line-height: 1.4;
  
      &::first-letter {
        padding-top: 3px;
        padding-right: 2px;
        float: left;
        font-size: 62px;
        font-weight: 600;
        line-height: 50px;
        color: var(--primary-2);
      }
    }
  }
}