Key Highlight

<article class="key-highlight bg--img bg--blend bg--shadow grid--bdrs grid--hover" id="esgtemplates">
  <div class="grid__content">
    <div class="heading--sub">EXCEL COMPENDIUM</div>
    <h3 class="heading--4">Explore 106 ESG Sector Templates</h3>
    <p>Discover the sector-specific ESG templates that analysts at Fitch Ratings use to evaluate ESG Relevance Scores for each entity, transaction, or program as part of the credit rating process.</p>
    <div class="button__wrapper">
      <a class="button button--2 overlay" data-form-title="" data-overlay="#marketo-download" data-title="ESG Sector Templates" data-url="" href="#" target="_self">DOWNLOAD TEMPLATES</a>
    </div>
  </div>
</article>

{{ attach_library('fitch_master/key-highlight') }}
{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  ]
%}
{% block paragraph %}
	<article
		class="
			key-highlight
			{% if content.field_background_image.0 is not empty %}bg--img{% endif %}
			{% if paragraph.field_background_blur.value == 1 %}bg--blur{% endif %}
			{% if paragraph.field_gradient_overlay.value == 1 %}bg--blend{% endif %}
			{% if content.field_color_overlay.0 is not empty %}bg--blend{% endif %}
		"
		style="
			{% if content.field_background_image.0 is not empty %}background-image: url('{{ file_url(content.field_background_image["#items"].entity.uri.value) }}'){% if paragraph.field_gradient_overlay.value == 1 %}, var(--gradient-background){% endif %};{% endif %}
			{% if content.field_background_color.0 is not empty %}background-color: {{ content.field_background_color.0 }};{% endif %}
			{% if content.field_color_overlay.0 is not empty %}background-color: {{ content.field_color_overlay.0 }};{% endif %}
			{% if content.field_text_color.0 is not empty %}color: {{ content.field_text_color.0 }};{% endif %}
		"
	>			
		{% include '@fitch_master/parts/video_background_hover.html.twig' %}
		<div class="grid__content">			
			{% include '@fitch_master/paragraph/paragraph--sub-title.html.twig' %}					
			{% include '@fitch_master/paragraph/paragraph--title.html.twig' %}	
			{% 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>
		{% if paragraph.field_fill_link.value == 1 %}
		<a
			class="fill--link"
			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 %}
		></a>
	{% endif %}
	</article>
{% endblock paragraph %}

.key-highlight {
  position: relative;
  height: 100%;
  padding: 3.6rem var(--spacing-2);
  overflow: hidden;
  background-color: var(--post-view-more-background);
  z-index: 1;
}

.key-highlight.bg--img, .key-highlight[style*="background-color: #174174;"] {
  color: var(--inverted-text-color);
}

.key-highlight .heading--1 {
  width: 66%;
  margin-bottom: 4.625rem;
}

.key-highlight .heading--sub {
  color: inherit;
}

.key-highlight p:last-of-type {
  margin-bottom: 0;
}

.key-highlight *[class|='heading'] + .button__wrapper {
  margin-top: 0;
}

.key-highlight .button__wrapper {
  height: 100%;
  margin-top: var(--spacing-1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
  align-items: flex-end;
}

.key-highlight .grid__content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.key-highlight .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* iPad Pro Portrait - iPad Landscape */
@media only screen and (max-width: 1024px) {
  .key-highlight .heading--1 {
    width: 84%;
  }
}

/* iPad Portrait  */
@media only screen and (max-width: 768px) {
  .key-highlight .heading--1 {
    width: 100%;
  }
}

@import '../abstracts/_mixins';

.key-highlight {
  position: relative;
  height: 100%;
  padding: 3.6rem var(--spacing-2);
  overflow: hidden;
  background-color: var(--post-view-more-background);
  z-index: 1;

  &.bg--img, &[style*="background-color: #174174;"] {
    color: var(--inverted-text-color);
  }

  .heading--1 {
    width: 66%;
    margin-bottom: 4.625rem;
  }
  .heading--sub {
    color: inherit;
  }

  p:last-of-type {
    margin-bottom: 0;
  }

  *[class|='heading'] + .button__wrapper {
    margin-top: 0;
  }

  .button__wrapper {
    height: 100%;
    margin-top: var(--spacing-1);
    display: flex;
    align-items: flex-end;
  }

  .grid__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@include mq-2 {
  .key-highlight {
    .heading--1 {
      width: 84%;
    }
  }
}

@include mq-3 {
  .key-highlight {
    .heading--1 {
      width: 100%;
    }
  }
}

    var videoBg{{ videoVAR }} = videojs('video-bg-{{ videoID }}');

    videoBg{{ videoVAR }}.ready(function () {
        jQuery(window).on('load', function () {
        videoBg{{ videoVAR }}.src(
            { type: 'video/mp4', src: '{{ videoURL }}' }
        );
        muted: true;
        
            jQuery('.video-{{ videoID }}')
            .parents('.key-highlight')
            .mouseenter(function(){
                videoBg{{ videoVAR }}.play();				
            })
            .mouseleave(function(){
                videoBg{{ videoVAR }}.pause();	
            });
        });
    });