<!-- Call to Action -->
<div class="cta theme_gold">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_inner">
<header class="cta_head is_mobile">
<h2 class="cta_title">
Find your people at Citizen University
</h2>
<div class="cta_desc">
<p>Connect with like-minded citizens who are building a stronger civic culture in communities across the nation.</p>
</div>
</header>
<div class="cta_grid">
<div class="cta_grid_item is_image_main" data-anim="any-threshold" data-anim-type="fade-up" style="--anim-order: 1">
<figure class="cta_figure" aria-hidden="true">
<span class="lazy_image_wrapper cta_main_image_wrapper">
<picture class="cta_main_picture">
<source media="(min-width: 1220px)" srcset="//images.fastspot.com/citizen-university/980x980/1" data-srcset="//images.fastspot.com/citizen-university/980x980/1">
<source media="(min-width: 980px)" srcset="//images.fastspot.com/citizen-university/980x980/1" data-srcset="//images.fastspot.com/citizen-university/980x654/1">
<source media="(min-width: 740px)" srcset="//images.fastspot.com/citizen-university/980x980/1" data-srcset="//images.fastspot.com/citizen-university/740x494/1">
<source media="(min-width: 500px)" srcset="//images.fastspot.com/citizen-university/980x980/1" data-srcset="//images.fastspot.com/citizen-university/740x494/1">
<img class="js-lazy js-lazyload cta_main_image" src="../../../images/placeholder.png" data-src="https://images.fastspot.com/citizen-university/980x980/1" alt="">
</picture>
</span>
<noscript>
<picture class="cta_main_picture">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/citizen-university/980x980/1">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/citizen-university/980x654/1">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/citizen-university/740x494/1">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/citizen-university/740x494/1">
<img class="js-lazy js-lazyload cta_main_image" src="//images.fastspot.com/citizen-university/980x980/1" data-src="//images.fastspot.com/citizen-university/980x980/1" alt="">
</picture>
</noscript>
</figure>
</div>
<div class="cta_grid_item is_image_one" data-anim="any-threshold" data-anim-type="fade-up" style="--anim-order: 2">
<figure class="cta_figure" aria-hidden="true">
<span class="lazy_image_wrapper cta_small_image_wrapper">
<img class="js-lazy js-lazyload cta_small_image" src="//images.fastspot.com/citizen-university/500x500/2" data-src="//images.fastspot.com/citizen-university/500x500/2" alt="">
</span>
<noscript>
<img class="cta_small_image" src="https://images.fastspot.com/citizen-university/500x500/2" alt="">
</noscript>
</figure>
</div>
<div class="cta_grid_item is_image_two" data-anim="any-threshold" data-anim-type="fade-up" style="--anim-order: 2">
<figure class="cta_figure" aria-hidden="true">
<span class="lazy_image_wrapper cta_small_image_wrapper">
<img class="js-lazy js-lazyload cta_small_image" src="//images.fastspot.com/citizen-university/500x500/3" data-src="//images.fastspot.com/citizen-university/500x500/3" alt="">
</span>
<noscript>
<img class="cta_small_image" src="https://images.fastspot.com/citizen-university/500x500/3" alt="">
</noscript>
</figure>
</div>
<div class="cta_grid_item is_content" data-anim="any-threshold" data-anim-type="fade-up" style="--anim-order: 3">
<div class="cta_content">
<header class="cta_head is_desktop">
<h2 class="cta_title">
Find your people at Citizen University
</h2>
<div class="cta_desc">
<p>Connect with like-minded citizens who are building a stronger civic culture in communities across the nation.</p>
</div>
</header>
<div class="cta_ctas_wrap">
<div class="cta_ctas_item">
<a href="" class="button theme_yellow ">
<span class="button_text">
Support our Work
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</div>
<div class="cta_ctas_item">
<a href="" class="button theme_yellow ">
<span class="button_text">
Become a Community Builder
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action -->
<!-- Call to Action -->
<div class="cta theme_{{ theme }}">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_inner">
<header class="cta_head is_mobile">
<h2 class="cta_title">
{{ title }}
</h2>
<div class="cta_desc">
<p>{{ description }}</p>
</div>
</header>
<div class="cta_grid">
<div class="cta_grid_item is_image_main" data-anim="any-threshold" data-anim-type="fade-up" style="--anim-order: 1">
<figure class="cta_figure" aria-hidden="true">
{% include "@partial-picture" with {
class: 'cta_main',
alt: '',
default: img.square.med,
image: 1,
sources: {
"1220px": img.square.med,
"980px": img.classic.med,
"740px": img.classic.sml,
"500px": img.classic.sml
}
} %}
</figure>
</div>
<div class="cta_grid_item is_image_one" data-anim="any-threshold" data-anim-type="fade-up" style="--anim-order: 2">
<figure class="cta_figure" aria-hidden="true">
{% include "@partial-image" with {
class: "cta_small",
alt: "",
image: small_image_one,
sources: [
img.square.xsml
]
} %}
</figure>
</div>
<div class="cta_grid_item is_image_two" data-anim="any-threshold" data-anim-type="fade-up" style="--anim-order: 2">
<figure class="cta_figure" aria-hidden="true">
{% include "@partial-image" with {
class: "cta_small",
alt: "",
image: small_image_two,
sources: [
img.square.xsml
]
} %}
</figure>
</div>
<div class="cta_grid_item is_content" data-anim="any-threshold" data-anim-type="fade-up" style="--anim-order: 3">
<div class="cta_content">
<header class="cta_head is_desktop">
<h2 class="cta_title">
{{ title }}
</h2>
<div class="cta_desc">
<p>{{ description }}</p>
</div>
</header>
{% if cta_items|length %}
<div class="cta_ctas_wrap">
{% for item in cta_items %}
<div class="cta_ctas_item">
{% include "@component-button" with {
theme: "yellow",
href: item.href,
text: item.title,
icon: 'arrow_right'
} %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action -->
No notes defined.