<section class="sponsors js-sponsors" aria-labelledby="sponsors-4-title">
<div class="fs-row">
<div class="fs-cell">
<div class="sponsors_inner">
<h2 class="visually_hide" id="sponsors-4-title">Sponsors</h2>
<div class="sponsors_major">
<h3 class="sponsors_title" id="sponsors-4-title-major">Major Funding Provided By</h3>
<ul class="sponsors_major_list" aria-labelledby="sponsors-4-title-major">
<li class="sponsors_major_item">
<a class="sponsors_sponsor_link" href="https://www.whiting.org/" target="_blank" rel="noopener noreferrer">
<div class="sponsors_name sponsors_name_major js-sponsors-name">
<span class="visually_hide">Whiting Foundation</span>
<div class="sponsors_name_words js-sponsors-words" aria-hidden="true">
<span class="sponsors_name_word js-sponsors-word">Whiting</span>
<span class="sponsors_name_word js-sponsors-word">Foundation</span>
</div>
</div>
</a>
</li>
<li class="sponsors_major_item">
<a class="sponsors_sponsor_link" href="#" target="_blank" rel="noopener noreferrer">
<img src="https://images.fastspot.com/fim/740x555/1" alt="Charles Stewart Mott Foundation" width="740" height="555" style="--logo-width: 740; --logo-height: 555" class="sponsors_logo sponsors_logo_major" loading="lazy" sizes="auto">
</a>
</li>
<li class="sponsors_major_item">
<img src="https://images.fastspot.com/fim/654x980/2" alt="Community Foundation | Greater Flint" width="654" height="980" style="--logo-width: 654; --logo-height: 980" class="sponsors_logo sponsors_logo_major" loading="lazy" sizes="auto">
</li>
</ul>
</div>
<div class="sponsors_supporting">
<h3 class="sponsors_title" id="sponsors-4-title-supporting">Supporting Sponsors</h3>
<div class="sponsors_marquee js-sponsors-marquee">
<ul class="sponsors_supporting_list js-sponsors-marquee-inner" aria-labelledby="sponsors-4-title-supporting">
<li class="sponsors_supporting_item js-sponsors-marquee-item">
<a class="sponsors_sponsor_link" href="#" target="_blank" rel="noopener noreferrer">
<div class="sponsors_name sponsors_name_supporting js-sponsors-name">
<span class="visually_hide">Some Supporting Sponsor</span>
<div class="sponsors_name_words js-sponsors-words" aria-hidden="true">
<span class="sponsors_name_word js-sponsors-word">Some</span>
<span class="sponsors_name_word js-sponsors-word">Supporting</span>
<span class="sponsors_name_word js-sponsors-word">Sponsor</span>
</div>
</div>
</a>
</li>
<li class="sponsors_supporting_item js-sponsors-marquee-item">
<img src="https://images.fastspot.com/fim/740x555/1" alt="Another Supporting Sponsor" width="740" height="555" style="--logo-width: 740; --logo-height: 555" class="sponsors_logo sponsors_logo_supporting" loading="lazy" sizes="auto">
</li>
<li class="sponsors_supporting_item js-sponsors-marquee-item">
<img src="https://images.fastspot.com/fim/654x980/2" alt="Yet Another Supporting Sponsor" width="654" height="980" style="--logo-width: 654; --logo-height: 980" class="sponsors_logo sponsors_logo_supporting" loading="lazy" sizes="auto">
</li>
<li class="sponsors_supporting_item js-sponsors-marquee-item">
<img src="https://images.fastspot.com/fim/300x129/3" alt="Final Supporting Sponsor" width="300" height="129" style="--logo-width: 300; --logo-height: 129" class="sponsors_logo sponsors_logo_supporting" loading="lazy" sizes="auto">
</li>
<li class="sponsors_supporting_item js-sponsors-marquee-item">
<a class="sponsors_sponsor_link" href="#" target="_blank" rel="noopener noreferrer">
<div class="sponsors_name sponsors_name_supporting js-sponsors-name">
<span class="visually_hide">Some Supporting Sponsor</span>
<div class="sponsors_name_words js-sponsors-words" aria-hidden="true">
<span class="sponsors_name_word js-sponsors-word">Some</span>
<span class="sponsors_name_word js-sponsors-word">Supporting</span>
<span class="sponsors_name_word js-sponsors-word">Sponsor</span>
</div>
</div>
</a>
</li>
<li class="sponsors_supporting_item js-sponsors-marquee-item">
<img src="https://images.fastspot.com/fim/500x500/1" alt="Another Supporting Sponsor" width="500" height="500" style="--logo-width: 500; --logo-height: 500" class="sponsors_logo sponsors_logo_supporting" loading="lazy" sizes="auto">
</li>
<li class="sponsors_supporting_item js-sponsors-marquee-item">
<img src="https://images.fastspot.com/fim/740x555/2" alt="Yet Another Supporting Sponsor" width="740" height="555" style="--logo-width: 740; --logo-height: 555" class="sponsors_logo sponsors_logo_supporting" loading="lazy" sizes="auto">
</li>
<li class="sponsors_supporting_item js-sponsors-marquee-item">
<img src="https://images.fastspot.com/fim/654x980/3" alt="Final Supporting Sponsor" width="654" height="980" style="--logo-width: 654; --logo-height: 980" class="sponsors_logo sponsors_logo_supporting" loading="lazy" sizes="auto">
</li>
</ul>
</div>
</div>
<div class="sponsors_callout">
<figure class="sponsors_callout_figure">
<img class="sponsors_callout_image" srcset="https://images.fastspot.com/fim/740x416/1 740w, https://images.fastspot.com/fim/500x282/1 500w, https://images.fastspot.com/fim/300x169/1 300w" src="https://images.fastspot.com/fim/300x169/1" alt="" style="--logo-width: 300; --logo-height: 169" loading="lazy" width="300" height="169">
</figure>
<div class="sponsors_callout_content">
<h3 class="sponsors_callout_title">Genesee County Millage Funding</h3>
<p class="sponsors_callout_description">The Genesee County Arts Education & Cultural Enrichment Millage provides major funding for our educational pathways, outreach programs, and community engagement initiatives.</p>
<div class="sponsors_callout_cta">
<a href="#" class="cta_link">
<span class="cta_link_inner">
<span class="cta_link_label">Read More About Millage Benefits</span>
<span class="cta_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% set id = uniqid('sponsors') %}
{% set _logo_sizes = [
{
width: 500,
height: 500,
},
{
width: 740,
height: 555,
},
{
width: 654,
height: 980,
},
{
width: 300,
height: 129,
},
{
width: 740,
height: 416,
},
{
width: 500,
height: 500,
},
{
width: 740,
height: 555,
},
{
width: 654,
height: 980,
},
{
width: 300,
height: 129,
},
{
width: 740,
height: 416,
},
{
width: 500,
height: 500,
},
{
width: 740,
height: 555,
},
{
width: 654,
height: 980,
},
{
width: 300,
height: 129,
},
{
width: 740,
height: 416,
},
] %}
<section class="sponsors js-sponsors" aria-labelledby="{{ id }}-title">
<div class="fs-row">
<div class="fs-cell">
<div class="sponsors_inner">
<h2 class="visually_hide" id="{{ id }}-title">Sponsors</h2>
{% if major_sponsors %}
<div class="sponsors_major">
<h3 class="sponsors_title" id="{{ id }}-title-major">{{ major_title }}</h3>
<ul class="sponsors_major_list" aria-labelledby="{{ id }}-title-major">
{% for sponsor in major_sponsors %}
{% set _sizes = _logo_sizes[loop.index0] %}
<li class="sponsors_major_item">
{% if sponsor.url %}
<a class="sponsors_sponsor_link" href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer">
{% endif %}
{% if sponsor.image is not null %}
<img
src="https://images.fastspot.com/{{ config.images }}/{{ _sizes.width }}x{{ _sizes.height }}/{{ sponsor.image }}"
alt="{{ sponsor.name }}"
width="{{ _sizes.width }}"
height="{{ _sizes.height }}"
style="--logo-width: {{ _sizes.width }}; --logo-height: {{ _sizes.height }}"
class="sponsors_logo sponsors_logo_major"
loading="lazy"
sizes="auto"
>
{% else %}
<div class="sponsors_name sponsors_name_major js-sponsors-name">
<span class="visually_hide">{{ sponsor.name }}</span>
<div class="sponsors_name_words js-sponsors-words" aria-hidden="true">
{% set words = sponsor.name|split(' ') %}
{% for word in words %}
<span class="sponsors_name_word js-sponsors-word">{{ word }}</span>
{% endfor %}
</div>
</div>
{% endif %}
{% if sponsor.url %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if supporting_sponsors %}
<div class="sponsors_supporting">
<h3 class="sponsors_title" id="{{ id }}-title-supporting">{{ supporting_title }}</h3>
<div class="sponsors_marquee js-sponsors-marquee">
<ul class="sponsors_supporting_list js-sponsors-marquee-inner" aria-labelledby="{{ id }}-title-supporting">
{% for sponsor in supporting_sponsors %}
{% set _sizes = _logo_sizes[loop.index0] %}
<li class="sponsors_supporting_item js-sponsors-marquee-item">
{% if sponsor.url %}
<a class="sponsors_sponsor_link" href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer">
{% endif %}
{% if sponsor.image is not null %}
<img
src="https://images.fastspot.com/{{ config.images }}/{{ _sizes.width }}x{{ _sizes.height }}/{{ sponsor.image }}"
alt="{{ sponsor.name }}"
width="{{ _sizes.width }}"
height="{{ _sizes.height }}"
style="--logo-width: {{ _sizes.width }}; --logo-height: {{ _sizes.height }}"
class="sponsors_logo sponsors_logo_supporting"
loading="lazy"
sizes="auto"
>
{% else %}
<div class="sponsors_name sponsors_name_supporting js-sponsors-name">
<span class="visually_hide">{{ sponsor.name }}</span>
<div class="sponsors_name_words js-sponsors-words" aria-hidden="true">
{% set words = sponsor.name|split(' ') %}
{% for word in words %}
<span class="sponsors_name_word js-sponsors-word">{{ word }}</span>
{% endfor %}
</div>
</div>
{% endif %}
{% if sponsor.url %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% if callout and callout.enabled %}
<div class="sponsors_callout">
<figure class="sponsors_callout_figure">
<img
class="sponsors_callout_image"
srcset="https://images.fastspot.com/fim/740x416/1 740w, https://images.fastspot.com/fim/500x282/1 500w, https://images.fastspot.com/fim/300x169/1 300w"
src="https://images.fastspot.com/fim/300x169/1"
alt=""
style="--logo-width: 300; --logo-height: 169"
loading="lazy"
width="300"
height="169"
>
</figure>
<div class="sponsors_callout_content">
<h3 class="sponsors_callout_title">{{ callout.title }}</h3>
<p class="sponsors_callout_description">{{ callout.description }}</p>
{% if callout.link %}
<div class="sponsors_callout_cta">
{% include "@partial-link" with {
title: callout.link.title,
url: callout.link.url,
class: 'cta',
icon: 'chevron_right',
} %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</section>
No notes defined.