<div class="cta_background">
<div class="fs-row cta_background_row">
<div class="fs-cell cta_background_cell">
<div class="cta_background_inner">
<div class="cta_background_media">
<div class="js-background-video-wrapper page_header_bg_video" data-background-video='{"display":"background","id":"85480265","type":"vimeo","title":null,"autoplay":true}'>
<div class=" page_header_bg_video_iframe_wrap">
<div class=" page_header_bg_video_iframe_target js-iframe-target"></div>
</div>
<div class="cta_background_video_controls">
<button class="page_header_bg_video_play_button js-page-header-bg-video-play-button">
<span class="page_header_bg_video_play_button_inner">
<span class="page_header_bg_video_play_button_label">Play Video</span>
<span class="page_header_bg_video_play_button_icon" aria-hidden="true">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</span>
</button>
<button class="page_header_bg_video_pause_button js-page-header-bg-video-pause-button">
<span class="page_header_bg_video_pause_button_inner">
<span class="page_header_bg_video_pause_button_label">Pause Video</span>
<span class="page_header_bg_video_pause_button_icon" aria-hidden="true">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</span>
</button>
</div>
</div>
<figure class="cta_background_figure">
<picture class="cta_background_picture">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/generic/1440x960/1" width="1440" height="960">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/generic/1220x814/1" width="1220" height="814">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/generic/980x654/1" width="980" height="654">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/generic/740x740/1" width="740" height="740">
<img class="cta_background_image" src="//images.fastspot.com/generic/200x300/1" alt="" loading="lazy" width="200" height="300">
</picture>
</figure>
</div>
<div class="cta_background_content">
<span class="cta_background_icon" aria-hidden="true">
<svg class="icon icon_360">
<use href="/images/icons.svg#360" />
</svg>
</span>
<h2 class="cta_background_title">Unbeatable Campus Experience</h2>
<span class="cta_background_description">SGU School of Medicine is the #1 provider of doctors into first-year US residencies for the last 12 years combined.</span>
<a href="#" class="cta_background_link">Take A Virtual Tour</a>
</div>
</div>
</div>
</div>
</div>
<div class="cta_background">
<div class="fs-row cta_background_row">
<div class="fs-cell cta_background_cell">
<div class="cta_background_inner">
<div class="cta_background_media">
{% if video %}
{% set video_options = {
display: "background",
id: video,
type: "vimeo",
title: page.title,
autoplay: true
} %}
<div class="js-background-video-wrapper page_header_bg_video" data-background-video='{{ video_options|json_encode }}'>
<div class=" page_header_bg_video_iframe_wrap">
<div class=" page_header_bg_video_iframe_target js-iframe-target"></div>
</div>
<div class="cta_background_video_controls">
{% render '@partial-button' with {
class: 'page_header_bg_video_play',
title: 'Play Video',
icon: 'play',
js: true
} %}
{% render "@partial-button" with {
class: 'page_header_bg_video_pause',
title: 'Pause Video',
icon: 'pause',
js: true
} %}
</div>
</div>
{% endif %}
<figure class="cta_background_figure">
{% if gutenberg_column_count > 1 %}
{% include '@partial-picture' with {
class: 'cta_background',
image: image,
alt: '',
loading: 'lazy',
default: img.portraitClassic.xxsml,
sources: {
'1220px': img.portraitClassic.xlrg,
'980px': img.portraitClassic.lrg,
'740px': img.portraitClassic.med,
'500px': img.portraitClassic.sml
}
} %}
{% else %}
{% include '@partial-picture' with {
class: 'cta_background',
image: image,
alt: '',
loading: 'lazy',
default: img.portraitClassic.xxsml,
sources: {
'1220px': img.classic.xlrg,
'980px': img.classic.lrg,
'740px': img.classic.med,
'500px': img.square.sml
}
} %}
{% endif %}
</figure>
</div>
<div class="cta_background_content">
<span class="cta_background_icon" aria-hidden="true">{{ icon('360') }}</span>
<h2 class="cta_background_title">{{ title }}</h2>
{% if description %}
<span class="cta_background_description">{{ description }}</span>
{% endif %}
{% if link %}
<a href="{{ link.url }}" class="cta_background_link">{{ link.label }}</a>
{% endif %}
</div>
</div>
</div>
</div>
</div>
No notes defined.