<div class="feature_one_item">
<figure class="feature_one_item_figure">
<a href="#">
<span class="lazy_image_wrapper feature_feat_item_image_wrapper">
<img class="js-lazy js-lazyload feature_feat_item_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w" alt="">
</span>
<noscript>
<img class="feature_feat_item_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1 300w" sizes="100vw" alt="">
</noscript>
</a>
<a href="#">
<span class="lazy_image_wrapper feature_two_item_image_wrapper">
<picture class="feature_two_item_picture">
<source media="(min-width: 980px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/1">
<source media="(min-width: 0px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1">
<img class="js-lazy js-lazyload feature_two_item_image" src="../../../images/placeholder.png" data-src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x300/1" alt="">
</picture>
</span>
<noscript>
<picture class="feature_two_item_picture">
<source media="(min-width: 980px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/1">
<source media="(min-width: 0px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1">
<img class="feature_two_item_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x300/1" alt="">
</picture>
</noscript> </a>
<a href="#">
<span class="lazy_image_wrapper feature_two_item_homepage_event_image_wrapper">
<picture class="feature_two_item_homepage_event_picture">
<source media="(min-width: 980px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1">
<source media="(min-width: 0px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1">
<img class="js-lazy js-lazyload feature_two_item_homepage_event_image" src="../../../images/placeholder.png" data-src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1" alt="">
</picture>
</span>
<noscript>
<picture class="feature_two_item_homepage_event_picture">
<source media="(min-width: 980px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1">
<source media="(min-width: 0px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1">
<img class="feature_two_item_homepage_event_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1" alt="">
</picture>
</noscript> </a>
<a href="#">
<span class="lazy_image_wrapper feature_three_item_image_wrapper">
<img class="js-lazy js-lazyload feature_three_item_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x200/1" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x200/1 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x334/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x494/1 740w" alt="">
</span>
<noscript>
<img class="feature_three_item_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/740x494/1" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x494/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x334/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x200/1 300w" sizes="100vw" alt="">
</noscript>
</a>
</figure>
<div class="feature_one_item_wrapper">
<h2 class="feature_one_item_title">
<a href="" class="feature_one_item_title_link">
<span class="feature_one_item_title_link_label">
</span>
</a>
</h2>
<div class="feature_one_item_meta">
<span class="feature_one_item_meta_tag">
</span>
</div>
<div class="feature_one_item_event_link_wrap">
</div>
</div>
</div>
<div class="feature_one_item">
{% if is_feature %}
<div class="feature_one_item_meta">
<span class="feature_one_item_meta_tag">
{{ item.tag.name }}
</span>
{% if item.labels %}
{% for label in item.labels %}
<span class="feature_one_item_meta_label">
<span>{{ label }}</span>
{%- if not loop.last %}, {% endif %}
</span>
{% endfor %}
{% endif %}
</div>
{% if heading %}
<h3 class="feature_one_item_title">
{% else %}
<h2 class="feature_one_item_title">
{% endif %}
<a href="{{ item.link }}" class="feature_one_item_title_link">
<span class="feature_one_item_title_link_label">
{{ item.title }}{% if item.external %}<span class="feature_one_item_title_link_icon">
{{ icon("external") }}
</span>
{% endif %}
</span>
</a>
{% if heading %}
</h3>
{% else %}
</h2>
{% endif %}
{% endif %}
<figure class="feature_one_item_figure">
<a href="#">
{% render "@partial-image" with {
class: "feature_feat_item",
alt: "",
image: item.image,
sources: [
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
]
} %}
</a>
<a href="#">
{% render '@partial-picture' with {
class: 'feature_two_item',
alt: '',
image: item.image,
default: img.square.xxsml,
sources: {
"980px": img.square.xsml,
"0px": img.wide.xsml
}
} %}
</a>
<a href="#">
{% render '@partial-picture' with {
class: 'feature_two_item_homepage_event',
alt: '',
image: item.image,
default: img.wide.xxsml,
sources: {
"980px": img.wide.xsml,
"0px": img.wide.xsml
}
} %}
</a>
<a href="#">
{% render "@partial-image" with {
class: "feature_three_item",
alt: '',
image: item.image,
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</a>
{% if item.image_tag %}
<span class="feature_one_item_image_tag">{{ item.image_tag }}</span>
{% endif %}
{% if item.date %}
<div class="feature_one_item_image_date">
<div class="feature_one_item_image_date_month">{{ item.date|date('M') }}</div>
<div class="feature_one_item_image_date_day">{{ item.date|date('j') }}</div>
</div>
{% endif %}
{% if item.image_credit %}
<div class="feature_one_item_image_credit">
<div class="feature_one_item_image_credit_inner">{{ item.image_credit }}</div>
</div>
{% endif %}
{% if item.video %}
<a href="{{ item.video }}" class="feature_one_item_video_link js-video-appender">
<span class="feature_one_item_video_link_label">Play the video</span>
<span class="feature_one_item_video_link_icon">{{ icon("podcast_play") }}</span>
</a>
{% endif %}
{% if item.podcast %}
<a href="{{ item.podcast }}"
class="feature_one_item_podcast_link js-podcast-link"
data-series="{{ item.series }}"
data-title="{{ item.title }}">
<span class="feature_one_item_podcast_link_label">Play the podcast</span>
<span class="feature_one_item_podcast_link_icon_play">{{ icon("podcast_play") }}</span>
<span class="feature_one_item_podcast_link_icon_pause">{{ icon("pause") }}</span>
</a>
{% endif %}
</figure>
<div class="feature_one_item_wrapper">
{% if not is_feature %}
{% if heading %}
<h3 class="feature_one_item_title">
{% else %}
<h2 class="feature_one_item_title">
{% endif %}
<a href="{{ item.link }}" class="feature_one_item_title_link">
<span class="feature_one_item_title_link_label">
{{ item.title }}{% if item.external %}<span class="feature_one_item_title_link_icon">
{{ icon("external") }}
</span>
{% endif %}
</span>
</a>
{% if heading %}
</h3>
{% else %}
</h2>
{% endif %}
<div class="feature_one_item_meta">
<span class="feature_one_item_meta_tag">
{{ item.tag.name }}
</span>
{% if item.labels %}
{% for label in item.labels %}
<span class="feature_one_item_meta_label">
<span>{{ label }}</span>
{% if not loop.last %}, {% endif %}
</span>
{% endfor %}
{% endif %}
</div>
{% endif %}
{% if item.description %}
<div class="feature_one_item_description">
<span class="feature_one_item_description_label">{{ item.description }}</span>
</div>
{% endif %}
<div class="feature_one_item_event_link_wrap">
{% if item.register_link %}
{% render "@partial-button--white" with {
text: "Register Today",
href: item.register_link,
class: 'feature_one_item_event_link',
icon: 'caret_right',
} %}
{% endif %}
{% if item.sold_out %}
{% include "@partial-button-status" with {
theme: "dark",
text: "This event is sold out.",
icon: "alert-button"
} %}
{% endif %}
</div>
</div>
</div>
No notes defined.