<div class="js-feature-scroller feature_scroller">
<div class="fs-row">
<div class="fs-cell">
<div class="feature_scroller_inner">
<div class="feature_scroller_header">
<h2 class="feature_scroller_title">Today With the Cathedral</h2>
<a class="feature_scroller_link" href="#">FULL CALENDAR</a>
</div>
<div class="feature_scroller_filter">
<ul class="button_filter_items">
<li class="button_filter_item">
<button class="button_filter_link button_filter_link_selected" data-type="all" type="button">
<span class="button_filter_link_icon">
<svg class="icon icon_check">
<use href="/images/icons.svg#check" />
</svg>
</span>
<span class="button_filter_link_label">All Events</span>
</button>
</li>
<li class="button_filter_item">
<button class="button_filter_link" data-type="inPersonOnline" type="button">
<span class="button_filter_link_icon">
<svg class="icon icon_check">
<use href="/images/icons.svg#check" />
</svg>
</span>
<span class="button_filter_link_label">Hybrid</span>
</button>
</li>
<li class="button_filter_item">
<button class="button_filter_link" data-type="inPerson" type="button">
<span class="button_filter_link_icon">
<svg class="icon icon_check">
<use href="/images/icons.svg#check" />
</svg>
</span>
<span class="button_filter_link_label">In person</span>
</button>
</li>
<li class="button_filter_item">
<button class="button_filter_link" data-type="online" type="button">
<span class="button_filter_link_icon">
<svg class="icon icon_check">
<use href="/images/icons.svg#check" />
</svg>
</span>
<span class="button_filter_link_label">Online</span>
</button>
</li>
</ul>
</div>
<div class="feature_scroller_items_wrapper">
<div class="feature_scroller_items_feature_wrapper">
<div class="feature_scroller_item feature_scroller_item_with_link">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">Cathedral Day Organ Recital</a>
</h3>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
<div class="feature_scroller_item_tickets">
<a href="#" class="feature_scroller_item_tickets_link">
<span class="feature_scroller_item_tickets_link_inner">
<span class="feature_scroller_item_tickets_link_label">Buy Tickets</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_items_carousel_wrapper">
<div class="js-carousel feature_scroller_items" data-carousel-options='{"contained":false,"controls":true,"pagination":false,"show":{"980px":2,"1220px":3}}'>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPersonOnline">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">Cathedral Day Organ Recital</a>
</h3>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
<div class="feature_scroller_item_tickets">
<a href="#" class="feature_scroller_item_tickets_link">
<span class="feature_scroller_item_tickets_link_inner">
<span class="feature_scroller_item_tickets_link_label">Buy Tickets</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPersonOnline">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/2 740w, https://images.fastspot.com/washington-national-cathedral/500x334/2 500w, https://images.fastspot.com/washington-national-cathedral/300x200/2 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">Online Independence Day Concert</a>
</h3>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_place">
<use href="/images/icons.svg#place" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Walker Court</span>
</div>
<div class="feature_scroller_item_type feature_scroller_item_type_subtype">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_free">
<use href="/images/icons.svg#free" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Free</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPerson">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/3 740w, https://images.fastspot.com/washington-national-cathedral/500x334/3 500w, https://images.fastspot.com/washington-national-cathedral/300x200/3 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">Erik and Chuyong Suter: Grieg's Piano Concerto</a>
</h3>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPersonOnline">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/4 740w, https://images.fastspot.com/washington-national-cathedral/500x334/4 500w, https://images.fastspot.com/washington-national-cathedral/300x200/4 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPersonOnline">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">Ornare Egestas</a>
</h3>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPerson">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/2 740w, https://images.fastspot.com/washington-national-cathedral/500x334/2 500w, https://images.fastspot.com/washington-national-cathedral/300x200/2 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPersonOnline">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/4 740w, https://images.fastspot.com/washington-national-cathedral/500x334/4 500w, https://images.fastspot.com/washington-national-cathedral/300x200/4 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPerson">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">Ornare Egestas</a>
</h3>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPersonOnline">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/2 740w, https://images.fastspot.com/washington-national-cathedral/500x334/2 500w, https://images.fastspot.com/washington-national-cathedral/300x200/2 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="inPersonOnline">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/4 740w, https://images.fastspot.com/washington-national-cathedral/500x334/4 500w, https://images.fastspot.com/washington-national-cathedral/300x200/4 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="online">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">Ornare Egestas</a>
</h3>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="online">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/2 740w, https://images.fastspot.com/washington-national-cathedral/500x334/2 500w, https://images.fastspot.com/washington-national-cathedral/300x200/2 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="online">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">Ornare Egestas</a>
</h3>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="online">
<div class="feature_scroller_item_inner">
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<figure class="feature_scroller_item_figure">
<img class="feature_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/2 740w, https://images.fastspot.com/washington-national-cathedral/500x334/2 500w, https://images.fastspot.com/washington-national-cathedral/300x200/2 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="feature_scroller_item_body">
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<span class="feature_scroller_item_time_label">11:15 AM</span>
</time>
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">
<svg class="icon icon_tv">
<use href="/images/icons.svg#tv" />
</svg>
</span>
<span class="feature_scroller_item_type_label">Youtube</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%
set carousel_options = {
contained: false,
controls: true,
pagination: false,
show: {
"980px": 2,
"1220px": 3,
}
}
%}
{% set carousel_options = carousel_options|json_encode %}
<div class="js-feature-scroller feature_scroller">
<div class="fs-row">
<div class="fs-cell">
<div class="feature_scroller_inner">
<div class="feature_scroller_header">
<h2 class="feature_scroller_title">{{ title }}</h2>
{% if not featured %}
<a class="feature_scroller_link" href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
</div>
{% if not featured %}
<div class="feature_scroller_filter">
<ul class="button_filter_items">
{% for item in filters %}
<li class="button_filter_item">
<button class="button_filter_link{% if loop.first %} button_filter_link_selected{% endif %}" data-type="{{ item.target }}" type="button">
<span class="button_filter_link_icon">{{ icon('check') }}</span>
<span class="button_filter_link_label">{{ item.label }}</span>
</button>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="feature_scroller_items_wrapper">
<div class="feature_scroller_items_feature_wrapper">
<div class="feature_scroller_item feature_scroller_item_with_link">
<div class="feature_scroller_item_inner">
{% if items[0].time %}
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">{{ icon('clock') }}</span>
<span class="feature_scroller_item_time_label">{{ items[0].time }}</span>
</time>
{% endif %}
<figure class="feature_scroller_item_figure">
{% include '@partial-image' with {
class: 'feature_scroller_item',
alt: '',
image: items[0].image,
loading: 'lazy',
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
<div class="feature_scroller_item_body">
{% if items[0].time %}
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">{{ icon('clock') }}</span>
<span class="feature_scroller_item_time_label">{{ items[0].time }}</span>
</time>
{% endif %}
{% if items[0].title %}
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">{{ items[0].title }}</a>
</h3>
{% endif %}
{% if items[0].type %}
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">{{ icon(items[0].type.icon) }}</span>
<span class="feature_scroller_item_type_label">{{ items[0].type.label }}</span>
</div>
{% if items[0].subtype %}
<div class="feature_scroller_item_type feature_scroller_item_type_subtype">
<span class="feature_scroller_item_type_icon">{{ icon(items[0].subtype.icon) }}</span>
<span class="feature_scroller_item_type_label">{{ items[0].subtype.label }}</span>
</div>
{% endif %}
{% if items[0].tickets %}
<div class="feature_scroller_item_tickets">
{% include '@partial-link' with {
class: 'feature_scroller_item_tickets',
title: items[0].tickets.label,
url: items[0].tickets.url
} %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% if featured %}
<div class="feature_scroller_feature_inner">
<figure class="feature_scroller_feature_figure">
{% include '@partial-image' with {
class: 'feature_scroller_feature',
alt: '',
image: featured.image,
loading: 'lazy',
sources: [
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
<div class="feature_scroller_feature_wrapper">
<div class="feature_scroller_feature_header">
<h3 class="feature_scroller_feature_title">{{ featured.title }}</h3>
</div>
{% if featured.description or featured.link %}
<div class="feature_scroller_feature_body">
{% if featured.description %}
<span class="feature_scroller_feature_description">{{ featured.description }}</span>
{% endif %}
{% if featured.link %}
<a class="feature_scroller_feature_link" href="{{ featured.link.url }}">
<span class="feature_scroller_feature_link_label">{{ featured.link.label }}</span>
<span class="feature_scroller_feature_link_icon">{{ icon('super_arrow_right') }}</span>
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% else %}
<div class="feature_scroller_items_carousel_wrapper">
<div class="js-carousel feature_scroller_items" data-carousel-options='{{ carousel_options }}'>
{% for item in items %}
<div class="feature_scroller_item feature_scroller_item_with_link" data-type="{{ item.target }}">
<div class="feature_scroller_item_inner">
{% if item.time %}
<time class="feature_scroller_item_time feature_scroller_item_time_lg">
<span class="feature_scroller_item_time_icon">{{ icon('clock') }}</span>
<span class="feature_scroller_item_time_label">{{ item.time }}</span>
</time>
{% endif %}
<figure class="feature_scroller_item_figure">
{% include '@partial-image' with {
class: 'feature_scroller_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
<div class="feature_scroller_item_body">
{% if item.time %}
<time class="feature_scroller_item_time feature_scroller_item_time_sm">
<span class="feature_scroller_item_time_icon">{{ icon('clock') }}</span>
<span class="feature_scroller_item_time_label">{{ item.time }}</span>
</time>
{% endif %}
{% if item.title %}
<h3 class="feature_scroller_item_title">
<a class="feature_scroller_item_title_label" href="#">{{ item.title }}</a>
</h3>
{% endif %}
{% if item.type %}
<div class="feature_scroller_item_types">
<div class="feature_scroller_item_type">
<span class="feature_scroller_item_type_icon">{{ icon(item.type.icon) }}</span>
<span class="feature_scroller_item_type_label">{{ item.type.label }}</span>
</div>
{% if item.subtype %}
<div class="feature_scroller_item_type feature_scroller_item_type_subtype">
<span class="feature_scroller_item_type_icon">{{ icon(item.subtype.icon) }}</span>
<span class="feature_scroller_item_type_label">{{ item.subtype.label }}</span>
</div>
{% endif %}
{% if item.tickets %}
<div class="feature_scroller_item_tickets">
{% include '@partial-link' with {
class: 'feature_scroller_item_tickets',
title: item.tickets.label,
url: item.tickets.url
} %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
No notes defined.