<div class="hero">
<div class="hero_intro">
<div class="hero_intro_background ">
<img class="hero_intro_background_image" srcset="https://images.fastspot.com/generic/1440x810/4 1440w, https://images.fastspot.com/generic/1220x686/4 1220w, https://images.fastspot.com/generic/980x552/4 980w, https://images.fastspot.com/generic/740x416/4 740w, https://images.fastspot.com/generic/500x282/4 500w, https://images.fastspot.com/generic/300x169/4 300w" sizes="100vw" src="https://images.fastspot.com/generic/300x169/4" alt="" loading="lazy" width="300" height="169">
<div class="js-background-video-wrapper hero_intro_background_video" data-background-video='{"display":"background","id":"258133523","type":"vimeo","title":"Fastspot Moments","autoplay":true}'>
<div class=" hero_intro_background_video_iframe_wrap">
<div class=" hero_intro_background_video_iframe_target js-iframe-target"></div>
</div>
<div class="hero_intro_background_video_controls">
<button class="hero_intro_background_video_play_button js-hero-intro-background-video-play-button">
<span class="hero_intro_background_video_play_button_inner">
<span class="hero_intro_background_video_play_button_label">Play Video</span>
<span class="hero_intro_background_video_play_button_icon" aria-hidden="true">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</span>
</span>
</button>
<button class="hero_intro_background_video_pause_button js-hero-intro-background-video-pause-button">
<span class="hero_intro_background_video_pause_button_inner">
<span class="hero_intro_background_video_pause_button_label">Pause Video</span>
<span class="hero_intro_background_video_pause_button_icon" aria-hidden="true">
<svg class="icon icon_video_pause">
<use href="/images/icons.svg#video_pause" />
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
<div class="hero_intro_content">
<div class="fs-row">
<div class="fs-cell">
<div class="hero_intro_content_inner">
<h1 class="hero_intro_title">The Gender and Work Initiative disseminates knowledge and practices to help create gender equitable workplaces.</h1>
</div>
</div>
</div>
</div>
</div>
<div class="hero_content">
<div class="hero_content_background">
<img src="/images/placeholder-hero-content-light.svg" alt="" class="hero_content_background_pattern">
</div>
<div class="fs-row">
<div class="fs-cell">
<div class="hero_content_inner">
<h2 class="hero_content_title">About us</h2>
<p class="hero_content_description">Lorem ipsum dolor sit amet consectetur. Molestie ultrices sit sit viverra in nibh ut. Habitant velit augue at placerat sollicitudin eget. Ac scelerisque nisi mauris turpis sit commodo non condimentum.</p>
<figure class="hero_content_figure">
<img class="hero_content_image" srcset="https://images.fastspot.com/generic/1220x686/2 1220w, https://images.fastspot.com/generic/980x552/2 980w, https://images.fastspot.com/generic/740x416/2 740w, https://images.fastspot.com/generic/500x282/2 500w, https://images.fastspot.com/generic/300x169/2 300w" sizes="(min-width: 980px) 872px, (min-width: 780px) 651px, (min-width: 360px) calc(96vw - 79px), 248px" src="https://images.fastspot.com/generic/300x169/2" alt="" loading="lazy" width="300" height="169">
<div class="hero_content_video">
<div class="hero_content_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"258133523","type":"vimeo","title":"Fastspot Moments","display":"inline","autoplay":false,"playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
</figure>
<a href="#" class="button button_shadow hero_content_link theme_default">
<span class="button_inner hero_content_link_inner">
<span class="button_label hero_content_link_label">More About CDHAI</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="hero">
<div class="hero_intro">
<div class="hero_intro_background {{ intro.illustration ? 'hero_intro_background_illustration' }}">
{% if intro.illustration %}
{% if page.theme == 'dark' %}
{% set illustration = '/images/placeholder-hero-dark.png' %}
{% else %}
{% set illustration = '/images/placeholder-hero-light.svg' %}
{% endif %}
<img src="{{ illustration }}" alt="" class="hero_intro_background_image">
{% else %}
{% include "@partial-image" with {
class: 'hero_intro_background',
image: intro.image,
alt: '',
crop: 'wide',
max: 'xlrg',
sizes: [
'100vw',
]
} %}
{% endif %}
{% if intro.video %}
{% set video_options = {
display: "background",
id: intro.video.id,
type: intro.video.type,
title: intro.video.title,
autoplay: true
} %}
<div class="js-background-video-wrapper hero_intro_background_video" data-background-video='{{ video_options|json_encode }}'>
<div class=" hero_intro_background_video_iframe_wrap">
<div class=" hero_intro_background_video_iframe_target js-iframe-target"></div>
</div>
<div class="hero_intro_background_video_controls">
{% render '@partial-button' with {
class: 'hero_intro_background_video_play',
title: 'Play Video',
icon: 'video_play',
js: true
} %}
{% render "@partial-button" with {
class: 'hero_intro_background_video_pause',
title: 'Pause Video',
icon: 'video_pause',
js: true
} %}
</div>
</div>
{% endif %}
</div>
<div class="hero_intro_content">
<div class="fs-row">
<div class="fs-cell">
<div class="hero_intro_content_inner">
<h1 class="hero_intro_title">{{ intro.title }}</h1>
</div>
</div>
</div>
</div>
</div>
<div class="hero_content">
<div class="hero_content_background">
<img src="{{ content.pattern }}" alt="" class="hero_content_background_pattern">
</div>
<div class="fs-row">
<div class="fs-cell">
<div class="hero_content_inner">
<h2 class="hero_content_title">{{ content.title }}</h2>
{% if content.description %}
<p class="hero_content_description">{{ content.description }}</p>
{% endif %}
<figure class="hero_content_figure">
{% include "@partial-image" with {
class: 'hero_content',
image: content.image,
alt: content.alt,
crop: 'wide',
max: 'lrg',
sizes: [
'(min-width: 980px) 872px',
'(min-width: 780px) 651px',
'(min-width: 360px) calc(96vw - 79px)',
'248px',
]
} %}
{% if content.video %}
<div class="hero_content_video">
{% include "@partial-lazy-video" with {
class: 'hero_content',
id: content.video.id,
type: content.video.type,
title: content.video.title,
} %}
</div>
{% endif %}
</figure>
{% if content.link %}
{% include "@partial-link-button" with {
class: 'hero_content',
title: content.link.title,
url: content.link.url,
target: content.link.target,
shadow: true,
theme: page.theme == 'dark' ? 'white' : 'default',
} %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
No notes defined.