<!-- Media Row -->
<div class="js-anim media_row component_theme_white component_alignment_right">
<div class="js-card-row media_row_block">
<div class="media_row_frame">
<div class="fs-row">
<div class="fs-cell">
<div class="media_row_inner">
<div class="media_row_header">
<figure class="media_row_header_figure">
<picture class="media_row_header_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/jhusoe/1220x814/11" width="1220" height="814">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/jhusoe/980x654/11" width="980" height="654">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/jhusoe/735x980/11" width="735" height="980">
<source media="(min-width: 750px)" srcset="https://images.fastspot.com/jhusoe/1220x686/11" width="1220" height="686">
<img class="media_row_header_image" src="//images.fastspot.com/jhusoe/740x416/11" alt="" loading="lazy" width="740" height="416">
</picture>
</figure>
</div>
<div class="media_row_cards">
<div class="media_row_card">
<!-- Stat Card -->
<div class="js-card-video card card_video card_type_default" data-card-video='{"video":{"id":"XPjQhvjQbSM","service":"youtube"},"lightboxSelector":"[data-card-video-lightbox=\"card-video-lightbox_1\"]"}'>
<div class="card_inner card_video_inner">
<figure class="card_video_figure">
<img class="card_video_image" srcset="https://images.fastspot.com/jhusoe/494x740/2 494w, https://images.fastspot.com/jhusoe/334x500/2 334w, https://images.fastspot.com/jhusoe/200x300/2 200w" sizes="(min-width: 1400px) 289px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 780px) 331px, calc(46.88vw - 25px)" src="https://images.fastspot.com/jhusoe/200x300/2" alt="" loading="lazy" width="200" height="300">
</figure>
<button class="card_video_btn" data-card-video-lightbox-btn-toggle="open" data-swap-target="#card_video_lightbox_card-video-lightbox_1" data-swap-linked="card-video-lightbox_1" aria-controls="card_video_lightbox_card-video-lightbox_1">
<svg class="icon icon_video_play_alt">
<use href="/images/icons.svg#video_play_alt" />
</svg>
</button>
</div>
</div>
<!-- END: Stat Card -->
<div id="card_video_lightbox_card-video-lightbox_1" class="card_video_lightbox" data-card-video-lightbox="card-video-lightbox_1" aria-hidden="true" inert>
<div class="card_video_lightbox_inner">
<button class="card_video_lightbox_btn_close" data-card-video-lightbox-btn-toggle="close" data-swap-target="#card_video_lightbox_card-video-lightbox_1" data-swap-linked="card-video-lightbox_1" aria-controls="card_video_lightbox_card-video-lightbox_1">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</button>
<div class="card_video_lightbox_embed_wrap">
<div data-card-video-embed></div>
</div>
</div>
</div>
</div>
<div class="media_row_card">
<!-- Image Card -->
<div class="card card_image card_type_contained">
<div class="card_inner card_image_inner">
<figure class="card_image_figure">
<img class="card_image_image" srcset="https://images.fastspot.com/jhusoe/735x980/6 735w, https://images.fastspot.com/jhusoe/555x740/6 555w, https://images.fastspot.com/jhusoe/375x500/6 375w, https://images.fastspot.com/jhusoe/225x300/6 225w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 290px" src="https://images.fastspot.com/jhusoe/225x300/6" alt="" loading="lazy" width="225" height="300">
</figure>
</div>
</div>
<!-- END: Image Card -->
</div>
</div>
</div>
</div>
</div>
<div class="media_row_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "Master of Science in Special Education", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
<div class="carousel_row_card">
<!-- Stat Card -->
<div class="js-card-video card card_video card_type_default" data-card-video='{"video":{"id":"XPjQhvjQbSM","service":"youtube"},"lightboxSelector":"[data-card-video-lightbox=\"card-video-lightbox_2\"]"}'>
<div class="card_inner card_video_inner">
<figure class="card_video_figure">
<img class="card_video_image" srcset="https://images.fastspot.com/jhusoe/494x740/2 494w, https://images.fastspot.com/jhusoe/334x500/2 334w, https://images.fastspot.com/jhusoe/200x300/2 200w" sizes="(min-width: 1400px) 289px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 780px) 331px, calc(46.88vw - 25px)" src="https://images.fastspot.com/jhusoe/200x300/2" alt="" loading="lazy" width="200" height="300">
</figure>
<button class="card_video_btn" data-card-video-lightbox-btn-toggle="open" data-swap-target="#card_video_lightbox_card-video-lightbox_2" data-swap-linked="card-video-lightbox_2" aria-controls="card_video_lightbox_card-video-lightbox_2">
<svg class="icon icon_video_play_alt">
<use href="/images/icons.svg#video_play_alt" />
</svg>
</button>
</div>
</div>
<!-- END: Stat Card -->
<div id="card_video_lightbox_card-video-lightbox_2" class="card_video_lightbox" data-card-video-lightbox="card-video-lightbox_2" aria-hidden="true" inert>
<div class="card_video_lightbox_inner">
<button class="card_video_lightbox_btn_close" data-card-video-lightbox-btn-toggle="close" data-swap-target="#card_video_lightbox_card-video-lightbox_2" data-swap-linked="card-video-lightbox_2" aria-controls="card_video_lightbox_card-video-lightbox_2">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</button>
<div class="card_video_lightbox_embed_wrap">
<div data-card-video-embed></div>
</div>
</div>
</div>
</div>
<div class="carousel_row_card">
<!-- Image Card -->
<div class="card card_image card_type_contained">
<div class="card_inner card_image_inner">
<figure class="card_image_figure">
<img class="card_image_image" srcset="https://images.fastspot.com/jhusoe/735x980/6 735w, https://images.fastspot.com/jhusoe/555x740/6 555w, https://images.fastspot.com/jhusoe/375x500/6 375w, https://images.fastspot.com/jhusoe/225x300/6 225w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 290px" src="https://images.fastspot.com/jhusoe/225x300/6" alt="" loading="lazy" width="225" height="300">
</figure>
</div>
</div>
<!-- END: Image Card -->
</div>
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination media_row_carousel_pagination"></div>
</div>
</div>
</div>
</div>
<!-- END: Media Row -->
{#
{% include '@component-media-row' with {
theme: 'white',
card_alignment: 'right',
group_title: 'Title',
group_image: '1',
group_alt: '',
cards: [
{
card_type: 'Card type',
items: ''
}
]
} %}
#}
<!-- Media Row -->
<div class="js-anim media_row component_theme_{{ theme ?: 'white' }} component_alignment_{{ card_alignment ?: 'right' }}">
<div class="js-card-row media_row_block">
<div class="media_row_frame">
<div class="fs-row">
<div class="fs-cell">
<div class="media_row_inner">
<div class="media_row_header">
<figure class="media_row_header_figure">
{% include '@partial-picture' with {
class: 'media_row_header',
image: group_image,
alt: group_alt,
loading: 'lazy',
default: img.wide.sml,
sources: {
'1394px': img.classic.lrg,
'1220px': img.classic.med,
'980px': img.portraitFull.med,
'750px': img.wide.lrg
}
} %}
</figure>
</div>
<div class="media_row_cards">
{% for card in cards %}
<div class="media_row_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="media_row_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "{{ group_title }}", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
{% for card in cards %}
<div class="carousel_row_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</div>
{% endfor %}
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination media_row_carousel_pagination"></div>
</div>
</div>
</div>
</div>
<!-- END: Media Row -->
No notes defined.