<div class="related_content theme_light has_description">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="related_content_inner">
                <header class="related_content_header">
                    <div class="related_content_header_content_wrap">
                        <div class="related_content_title">
                            Highlights
                        </div>

                        <div class="related_content_desc">
                            <div class="related_content_desc_inner">
                                <div class="related_content_desc_text">
                                    <p>We host events and share the <a href="#">latest news and research</a> from the field on the most pressing issues in digital media and child development. <a href="#">See all topics</a>.</p>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="related_content-2_pagination"></div>
                </header>

                <div class="related_content_content">
                    <div class="related_content_items js-carousel" data-carousel-options='{"contained":false,"show":{"0px":1,"740px":2,"1220px":3},"pagination":".related_content-2_pagination","controls":{"container":".related_content-2_controls","previous":".related_content-2_controls_previous","next":".related_content-2_controls_next"}}'>
                        <div class="related_content_item">
                            <div class="event_list_item type_contained 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>
                            </div>
                        </div>
                        <div class="related_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="related_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="related_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="related_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="related_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="related_content_controls  related_content-2_controls">
                        <button type="button" class="related_content_control related_content_controls_previous related_content-2_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="related_content_control related_content_controls_next related_content-2_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("related_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="related_content theme_{{ theme }} {% if description %}has_description{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="related_content_inner">
				<header class="related_content_header">
					<div class="related_content_header_content_wrap">
						<div class="related_content_title">
							{{ title|default("Related Content") }}
						</div>

						{% if description %}
							<div class="related_content_desc">
								<div class="related_content_desc_inner">
									<div class="related_content_desc_text">
										{{ description }}
									</div>

									{% if topics %}
										<div class="related_content_desc_pills">
											{% include "@partial-pill-list" with {
												items: topics,
												theme: "yellow"
											} %}
										</div>
									{% endif %}
								</div>
							</div>
						{% endif %}
					</div>

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

				<div class="related_content_content">
					<div class="related_content_items js-carousel" data-carousel-options='{{ carousel_options_json }}'>
						{% for item in items %}
							<div class="related_content_item">
								{% if item.event %}
									{% include "@partial-event-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'
										]
									} %}
								{% 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="related_content_controls {% if items|length < 4 %}disabled{% endif %} {{ unique_base_class }}_controls">
						<button type="button" class="related_content_control related_content_controls_previous {{ unique_base_class }}_controls_previous" aria-label="Previous">
							{{ icon("arrow_left_long") }}
						</button>

						<button type="button" class="related_content_control related_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.