<div class="visual_cta has_logo component_has_radius component_has_bg_media">
<div class="visual_cta_inner">
<div class="visual_cta_grid">
<div class="visual_cta_grid_item is_media">
<div class="visual_cta_media">
<figure class="visual_cta_figure">
<picture class="visual_cta_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/hilbert/980x552/4" width="980" height="552" />
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/hilbert/1220x686/4" width="1220" height="686" />
<source media="(min-width: 1200px)" srcset="https://images.fastspot.com/hilbert/1440x810/4" width="1440" height="810" />
<img class="visual_cta_image" src="https://images.fastspot.com/hilbert/654x980/4" alt="" loading="lazy" width="654" height="980" />
</picture>
</figure>
<div class="js-background-video-wrapper bg_video visual_cta_video" data-background-video='{"display":"background","id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","autoplay":true}'>
<div class="bg_video_iframe_wrap visual_cta_video_iframe_wrap">
<div class=" bg_video_iframe_target visual_cta_video_iframe_target js-iframe-target"></div>
</div>
<div class="bg_video_controls visual_cta_video_controls">
<button class="bg_video_play_button js-bg-video-play-button">
<span class="bg_video_play_button_inner">
<span class="bg_video_play_button_label">Play Video</span>
<span class="bg_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="bg_video_pause_button js-bg-video-pause-button">
<span class="bg_video_pause_button_inner">
<span class="bg_video_pause_button_label">Pause Video</span>
<span class="bg_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>
<div class="visual_cta_grid_item is_body">
<div class="visual_cta_body">
<header class="visual_cta_header">
<h2 class="visual_cta_title">
Hilbert<br>Hawks
</h2>
<h3 class="visual_cta_pretitle">
Athletics
</h3>
</header>
<div class="visual_cta_content">
<div class="visual_cta_desc">
<p>At Hilbert, we mentor student-athletes for success, emphasizing academics, fair play, diversity, and positive leadership — join us in fostering a community of excellence. Go Hawks!</p>
</div>
</div>
<footer class="visual_cta_footer">
<div class="visual_cta_links_items">
<div class="visual_cta_links_item">
<a href="#" class="btn_link theme_gold">
<span class="btn_link_inner">
<span class="btn_link_label">Visit Hilbert Athletics</span>
<span class="btn_link_icon" aria-hidden="true">
<svg class="icon icon_external">
<use href="/images/icons.svg#external" />
</svg>
</span>
</span>
</a>
</div>
<div class="visual_cta_links_item">
<a href="#" class="btn_link theme_transparent_white">
<span class="btn_link_inner">
<span class="btn_link_label">Recreational Sports & Summer Camps</span>
<span class="btn_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</footer>
</div>
</div>
<div class="visual_cta_logo_wrap">
<img src="/images/logo-hilbert-hawks.png" loading="lazy" alt="" />
</div>
</div>
</div>
</div>
<div class="visual_cta {% if logo %}has_logo{% endif %} component_has_radius component_has_bg_media">
<div class="visual_cta_inner">
<div class="visual_cta_grid">
<div class="visual_cta_grid_item is_media">
<div class="visual_cta_media">
<figure class="visual_cta_figure">
{% include '@partial-picture' with {
class: 'visual_cta',
alt: null,
image: bg_image,
default: img.portraitClassic.med,
sources: {
"1200px": img.wide.xlrg,
"980px": img.wide.lrg,
"740px": img.wide.med
},
sizes: [
"100vw"
]
} %}
</figure>
{% if video.id %}
{% set video_options = {
display: "background",
id: video.id,
type: video.type,
title: video.title,
autoplay: true
} %}
{% include "@partial-background-video" with {
class: "visual_cta",
video_options: video_options
} %}
{% endif %}
</div>
</div>
<div class="visual_cta_grid_item is_body">
<div class="visual_cta_body">
<header class="visual_cta_header">
<h2 class="visual_cta_title">
{{ title }}
</h2>
{% if pretitle %}
<h3 class="visual_cta_pretitle">
{{ pretitle }}
</h3>
{% endif %}
</header>
<div class="visual_cta_content">
<div class="visual_cta_desc">
<p>{{ description }}</p>
</div>
</div>
<footer class="visual_cta_footer">
<div class="visual_cta_links_items">
{% for link in links %}
<div class="visual_cta_links_item">
{% include '@partial-link' with {
title: link.title,
url: link.href,
target: '',
class: 'btn',
js: false,
icon: link.icon|default('arrow_right'),
aria: '',
nowrap: false,
theme: loop.first ? "gold" : "transparent_white"
} %}
</div>
{% endfor %}
</div>
</footer>
</div>
</div>
{% if logo %}
<div class="visual_cta_logo_wrap">
<img src="{{ logo }}" loading="lazy" alt="" />
</div>
{% endif %}
</div>
</div>
</div>
No notes defined.