<div class="latest_research_content theme_light ">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="latest_research_content_inner">
                <header class="latest_research_content_header">
                    <div class="latest_research_content_header_content_wrap">
                        <div class="latest_research_content_title">
                            Latest Research
                        </div>
                    </div>

                    <div class="latest_research_content-1_pagination"></div>
                </header>

                <div class="latest_research_content_content">
                    <div class="latest_research_content_items js-carousel" data-carousel-options='{"contained":false,"show":{"0px":1,"740px":2,"1220px":3},"pagination":".latest_research_content-1_pagination","controls":{"container":".latest_research_content-1_controls","previous":".latest_research_content-1_controls_previous","next":".latest_research_content-1_controls_next"}}'>
                        <div class="latest_research_content_item">
                            <div class="event_list_item type_default theme_default">
                                <div class="event_list_item_meta event_list_item_meta_header">
                                    <div class="event_list_item_meta_wrapper event_list_item_meta_header_wrapper">
                                        <time class="event_list_item_date" datetime="">
                                            <span class="event_list_item_icon event_list_item_date_icon">
                                                <svg class="icon icon_calendar">
                                                    <use href="/images/icons.svg#calendar" />
                                                </svg>
                                            </span>
                                            <span class="event_list_item_meta_label event_list_item_date_label">June 16, 2023</span>
                                        </time>
                                        <span class="event_list_item_location" datetime="">
                                            <span class="event_list_item_icon event_list_item_location_icon">
                                                <svg class="icon icon_place">
                                                    <use href="/images/icons.svg#place" />
                                                </svg>
                                            </span>
                                            <span class="event_list_item_meta_label event_list_item_location_label">Hilton Washington DC National Mall</span>
                                        </span>
                                    </div>
                                </div>

                                <figure class="event_list_item_figure">

                                    <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
                                </figure>

                                <div class="event_list_item_content">
                                    <div class="card_category">Ask the Experts</div>

                                    <h2 class="event_list_item_title">
                                        <a href="#" class="event_list_item_title_link">
                                            On Boredom: Screen Time. Free Time. and Child Development
                                        </a>
                                    </h2>

                                    <div class="event_list_item_meta">
                                        <div class="event_list_item_meta_wrapper">
                                            <time class="event_list_item_time" datetime="">
                                                <span class="event_list_item_icon event_list_item_time_icon">
                                                    <svg class="icon icon_clock">
                                                        <use href="/images/icons.svg#clock" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_meta_label event_list_item_time_label">8:00 PM UTC</span>
                                            </time>
                                        </div>
                                    </div>

                                    <div class="event_list_item_desc">
                                        <p>What are the benefits and harms of “bored time” for children and has digital media displaced the space to let minds wander?</p>
                                    </div>

                                    <div class="event_list_item_topics_wrap">
                                        <div class="pill_list theme_yellow">
                                            <div class="pill_item">

                                                <div class="pill">
                                                    Mental Health
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="event_list_item_speakers_wrapper">

                                        <div class="speakers_list show_count">
                                            <div class="speakers_list_title">
                                                Speakers
                                            </div>

                                            <div class="speakers_list_grid_items">

                                                <div class="speakers_list_grid_item theme_yellow">
                                                    <div id="speakers_list_item-3_1_item" class="speakers_list_item js-speaker-tooltip">
                                                        <div id="speakers_list_item-3_1_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                            <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                            <h4 id="speakers_list_item-3_1_title" class="speakers_list_item_title">
                                                                Caley Arzamarski, PhD, NCSP
                                                            </h4>

                                                            <div class="speakers_list_item_desc">
                                                                <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                                                            </div>
                                                        </div>

                                                        <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-3_1_item" data-swap-group="speakers_list_item-3" aria-controls="speakers_list_item-3_1_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                            <figure class="speakers_list_item_figure">

                                                                <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                                                            </figure>
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="speakers_list_grid_item theme_salmon">
                                                    <div id="speakers_list_item-3_2_item" class="speakers_list_item js-speaker-tooltip">
                                                        <div id="speakers_list_item-3_2_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                            <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                            <h4 id="speakers_list_item-3_2_title" class="speakers_list_item_title">
                                                                Caley Arzamarski, PhD, NCSP
                                                            </h4>

                                                            <div class="speakers_list_item_desc">
                                                                <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                                                            </div>
                                                        </div>

                                                        <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-3_2_item" data-swap-group="speakers_list_item-3" aria-controls="speakers_list_item-3_2_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                            <figure class="speakers_list_item_figure">

                                                                <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                                                            </figure>
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="speakers_list_grid_item theme_light_green">
                                                    <div id="speakers_list_item-3_3_item" class="speakers_list_item js-speaker-tooltip">
                                                        <div id="speakers_list_item-3_3_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                            <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                            <h4 id="speakers_list_item-3_3_title" class="speakers_list_item_title">
                                                                Caley Arzamarski, PhD, NCSP
                                                            </h4>

                                                            <div class="speakers_list_item_desc">
                                                                <p>Est duis proident cillum excepteur ex sint aliquip amet.</p>
                                                            </div>
                                                        </div>

                                                        <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-3_3_item" data-swap-group="speakers_list_item-3" aria-controls="speakers_list_item-3_3_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                            <figure class="speakers_list_item_figure">

                                                                <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/2" alt="" loading="lazy" width="100" height="100">
                                                            </figure>
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="speakers_list_grid_item theme_pink">
                                                    <div id="speakers_list_item-3_4_item" class="speakers_list_item js-speaker-tooltip">
                                                        <div id="speakers_list_item-3_4_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                            <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                            <h4 id="speakers_list_item-3_4_title" class="speakers_list_item_title">
                                                                Caley Arzamarski, PhD, NCSP
                                                            </h4>

                                                            <div class="speakers_list_item_desc">
                                                                <p>Consequat consectetur velit tempor consequat est reprehenderit duis nostrud labore in nisi dolor cillum ad.</p>
                                                            </div>
                                                        </div>

                                                        <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-3_4_item" data-swap-group="speakers_list_item-3" aria-controls="speakers_list_item-3_4_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                            <figure class="speakers_list_item_figure">

                                                                <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/3" alt="" loading="lazy" width="100" height="100">
                                                            </figure>
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="speakers_list_grid_item theme_light_blue">
                                                    <div id="speakers_list_item-3_5_item" class="speakers_list_item js-speaker-tooltip">
                                                        <div id="speakers_list_item-3_5_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                            <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                            <h4 id="speakers_list_item-3_5_title" class="speakers_list_item_title">
                                                                Caley Arzamarski, PhD, NCSP
                                                            </h4>

                                                            <div class="speakers_list_item_desc">
                                                                <p>Quis velit adipisicing esse officia ea.</p>
                                                            </div>
                                                        </div>

                                                        <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-3_5_item" data-swap-group="speakers_list_item-3" aria-controls="speakers_list_item-3_5_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                            <figure class="speakers_list_item_figure">

                                                                <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/4" alt="" loading="lazy" width="100" height="100">
                                                            </figure>
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="speakers_list_grid_item theme_dark_green">
                                                    <div id="speakers_list_item-3_6_item" class="speakers_list_item js-speaker-tooltip">
                                                        <div id="speakers_list_item-3_6_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                            <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                            <h4 id="speakers_list_item-3_6_title" class="speakers_list_item_title">
                                                                Caley Arzamarski, PhD, NCSP
                                                            </h4>

                                                            <div class="speakers_list_item_desc">
                                                                <p>Ipsum aute ullamco velit ut culpa do voluptate.</p>
                                                            </div>
                                                        </div>

                                                        <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-3_6_item" data-swap-group="speakers_list_item-3" aria-controls="speakers_list_item-3_6_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                            <figure class="speakers_list_item_figure">

                                                                <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                                                            </figure>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="latest_research_content_item">
                            <div class="card type_contained theme_default">
                                <figure class="card_figure">
                                    <a href="#">

                                        <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/2 740w, https://images.fastspot.com/framework/500x282/2 500w, https://images.fastspot.com/framework/300x169/2 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/2" alt="" loading="lazy" width="300" height="169">
                                    </a>
                                </figure>

                                <div class="card_content">
                                    <div class="card_category">Press Release</div>

                                    <h3 class="card_title">
                                        <a href="#" class="card_title_link">
                                            Children and Screens Endorses Proposed Federal Act
                                        </a>
                                    </h3>

                                    <div class="card_desc">
                                        <p>New bipartisan legislation would authorize and fund a National Institutes of Health program to study the effects of media on child development.</p>
                                    </div>

                                    <div class="card_topics_wrap">
                                        <div class="pill_list theme_yellow">
                                            <div class="pill_item">

                                                <div class="pill">
                                                    Policy & Legislation
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="latest_research_content_item">
                            <div class="card type_contained theme_default">
                                <figure class="card_figure">
                                    <a href="#">

                                        <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/3 740w, https://images.fastspot.com/framework/500x282/3 500w, https://images.fastspot.com/framework/300x169/3 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/3" alt="" loading="lazy" width="300" height="169">
                                    </a>
                                </figure>

                                <div class="card_content">
                                    <div class="card_category">Tip Sheet</div>

                                    <h3 class="card_title">
                                        <a href="#" class="card_title_link">
                                            The Rise of Dr. Google
                                        </a>
                                    </h3>

                                    <div class="card_desc">
                                        <p>How can families, schools, and communities encourage digital health literacy and help children use a critical lens to find trusted sources for health advice?</p>
                                    </div>

                                    <div class="card_topics_wrap">
                                        <div class="pill_list theme_yellow">
                                            <div class="pill_item">

                                                <div class="pill">
                                                    Digital Literacy
                                                </div>
                                            </div>
                                            <div class="pill_item">

                                                <div class="pill">
                                                    Games for Health
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="latest_research_content_item">
                            <div class="card type_contained theme_default">
                                <figure class="card_figure">
                                    <a href="#">

                                        <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/4 740w, https://images.fastspot.com/framework/500x282/4 500w, https://images.fastspot.com/framework/300x169/4 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/4" alt="" loading="lazy" width="300" height="169">
                                    </a>
                                </figure>

                                <div class="card_content">
                                    <div class="card_category">Ask the Experts</div>

                                    <h3 class="card_title">
                                        <a href="#" class="card_title_link">
                                            On Boredom: Screen Time. Free Time. and Child Development
                                        </a>
                                    </h3>

                                    <div class="card_time_wrap">
                                        <time class="card_time" datetime="">
                                            <span class="card_time_date">June 16</span>
                                            <span class="card_time_time">8:00 PM UTC</span>
                                        </time>
                                    </div>

                                    <div class="card_desc">
                                        <p>What are the benefits and harms of “bored time” for children and has digital media displaced the space to let minds wander?</p>
                                    </div>

                                    <div class="card_topics_wrap">
                                        <div class="pill_list theme_yellow">
                                            <div class="pill_item">

                                                <div class="pill">
                                                    Mental & Behavioral Health
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="latest_research_content_item">
                            <div class="card type_contained theme_default">
                                <figure class="card_figure">
                                    <a href="#">

                                        <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
                                    </a>
                                </figure>

                                <div class="card_content">
                                    <div class="card_category">Press Release</div>

                                    <h3 class="card_title">
                                        <a href="#" class="card_title_link">
                                            Children and Screens Endorses Proposed Federal Act
                                        </a>
                                    </h3>

                                    <div class="card_desc">
                                        <p>New bipartisan legislation would authorize and fund a National Institutes of Health program to study the effects of media on child development.</p>
                                    </div>

                                    <div class="card_topics_wrap">
                                        <div class="pill_list theme_yellow">
                                            <div class="pill_item">

                                                <div class="pill">
                                                    Policy & Legislation
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="latest_research_content_item">
                            <div class="card type_contained theme_default">
                                <figure class="card_figure">
                                    <a href="#">

                                        <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/2 740w, https://images.fastspot.com/framework/500x282/2 500w, https://images.fastspot.com/framework/300x169/2 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/2" alt="" loading="lazy" width="300" height="169">
                                    </a>
                                </figure>

                                <div class="card_content">
                                    <div class="card_category">Tip Sheet</div>

                                    <h3 class="card_title">
                                        <a href="#" class="card_title_link">
                                            The Rise of Dr. Google
                                        </a>
                                    </h3>

                                    <div class="card_desc">
                                        <p>How can families, schools, and communities encourage digital health literacy and help children use a critical lens to find trusted sources for health advice?</p>
                                    </div>

                                    <div class="card_topics_wrap">
                                        <div class="pill_list theme_yellow">
                                            <div class="pill_item">

                                                <div class="pill">
                                                    Digital Literacy
                                                </div>
                                            </div>
                                            <div class="pill_item">

                                                <div class="pill">
                                                    Games for Health
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="latest_research_content_controls latest_research_content-1_controls">
                        <button type="button" class="latest_research_content_control latest_research_content_controls_previous latest_research_content-1_controls_previous" aria-label="Previous">

                            <svg class="icon icon_arrow_left_long">
                                <use href="/images/icons.svg#arrow_left_long" />
                            </svg>

                        </button>

                        <button type="button" class="latest_research_content_control latest_research_content_controls_next latest_research_content-1_controls_next" aria-label="Next">

                            <svg class="icon icon_arrow_right_long">
                                <use href="/images/icons.svg#arrow_right_long" />
                            </svg>

                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% set unique_base_class = uniqid("latest_research_content") %}

{% set carousel_options_json = {
	contained: false,
	show: {
		"0px": 1,
		"740px": 2,
		"1220px": 3
	},
	pagination: "." ~ unique_base_class ~ "_pagination",
	controls: {
		container: "." ~  unique_base_class ~ "_controls",
		previous:  "." ~ unique_base_class ~ "_controls_previous",
		next:  "." ~ unique_base_class ~ "_controls_next"
	}
}|json_encode() %}

<div class="latest_research_content theme_{{ theme }} {% if description %}has_description{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="latest_research_content_inner">
				<header class="latest_research_content_header">
					<div class="latest_research_content_header_content_wrap">
						<div class="latest_research_content_title">
							{{ title|default("Latest Research") }}
						</div>
					</div>

					<div class="{{ unique_base_class }}_pagination"></div>
				</header>

				<div class="latest_research_content_content">
					<div class="latest_research_content_items js-carousel" data-carousel-options='{{ carousel_options_json }}'>
						{% for item in items %}
							<div class="latest_research_content_item">
								{% if item.event == true %}
									{% render "@partial-event-card"  %}
								{% else %}
									{% include "@partial-card" with {
									theme: card_theme,
									item: item,
									type: card_type,
									pill_theme: card_pill_theme,
									sources: [
										img.wide.sml,
										img.wide.xsml,
										img.wide.xxsml
									],
									sizes: [
										'(min-width: 500px) 400px',
										'50vw'
									]
								} %}
								{% endif %}
							</div>
						{% endfor %}
					</div>

					<div class="latest_research_content_controls {{ unique_base_class }}_controls">
						<button type="button" class="latest_research_content_control latest_research_content_controls_previous {{ unique_base_class }}_controls_previous" aria-label="Previous">
							{{ icon("arrow_left_long") }}
						</button>

						<button type="button" class="latest_research_content_control latest_research_content_controls_next {{ unique_base_class }}_controls_next" aria-label="Next">
							{{ icon("arrow_right_long") }}
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.