<!-- Page Content -->
<div class="page_content">
    <!-- Full Width Callouts -->
    <div class="full_width_callouts">
        <div class="js-spotlight spotlight_basic">
            <div class="spotlight_basic_header">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="spotlight_basic_header_inner">
                            <h1 class="spotlight_basic_title" id="page_header_title">Data Science and AI Institute:</h1>
                            <div class="spotlight_basic_subtitle">
                                The Collaboration of Human & Artificial Intelligence
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="spotlight_basic_body">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="spotlight_basic_inner">

                            <div class="spotlight_basic_content">
                                <div class="spotlight_basic_statement">

                                    <span class="spotlight_basic_statement_end">The Power and Promise of Data Science and AI</span>
                                </div>
                            </div>

                            <div class="spotlight_basic_video">
                                <div class="js-background-video-wrapper page_header_bg_video" data-background-video='{"display":"background","id":"886512527","type":"vimeo","title":"Fastspot Moments","autoplay":true}'>
                                    <div class="page_header_bg_video_controls">

                                        <button class="page_header_bg_video_play_button js-page-header-bg-video-play-button">
                                            <span class="page_header_bg_video_play_button_inner">
                                                <span class="page_header_bg_video_play_button_label">Play Video</span>
                                                <span class="page_header_bg_video_play_button_icon" aria-hidden="true">

                                                    <svg class="icon icon_play">
                                                        <use href="/images/icons.svg#play" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </button>

                                        <button class="page_header_bg_video_pause_button js-page-header-bg-video-pause-button">
                                            <span class="page_header_bg_video_pause_button_inner">
                                                <span class="page_header_bg_video_pause_button_label">Pause Video</span>
                                                <span class="page_header_bg_video_pause_button_icon" aria-hidden="true">

                                                    <svg class="icon icon_pause">
                                                        <use href="/images/icons.svg#pause" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </button>
                                    </div>

                                    <div class="page_header_bg_video_iframe_wrap">
                                        <div class="page_header_bg_video_iframe_target js-iframe-target"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Gallery -->
        <div class="gallery">
            <div class="gallery_body">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="gallery_body_inner">
                            <div class="gallery_items">
                                <div class="gallery_row gallery_row_layout_70_30">

                                    <div class="gallery_item gallery_item_has_media">
                                        <figure class="gallery_item_figure gallery_item_size_wide">
                                            <div class="gallery_item_media">

                                                <img class="gallery_item_image" srcset="https://images.fastspot.com/framework/1440x810/1 1440w, https://images.fastspot.com/framework/1220x686/1 1220w, https://images.fastspot.com/framework/980x552/1 980w, https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
                                            </div>
                                            <div class="gallery_item_body">
                                                <figcaption class="gallery_item_caption">
                                                    <p>The Johns Hopkins Data Science and AI Institute advances the intentional collaboration of humans and artificial intelligence, combining the strengths of each and building on trustworthy datasets to understand and improve the human condition.</p>
                                                </figcaption>

                                                <div class="gallery_item_actions">
                                                    <div class="gallery_item_action">

                                                        <a href="#" class="gallery_item_link">
                                                            <span class="gallery_item_link_inner">
                                                                <span class="gallery_item_link_label">Join Our Researchers List</span>
                                                                <span class="gallery_item_link_icon" aria-hidden="true">

                                                                    <svg class="icon icon_chevron_right">
                                                                        <use href="/images/icons.svg#chevron_right" />
                                                                    </svg>

                                                                </span>
                                                            </span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </figure>
                                    </div>

                                    <div class="gallery_item">
                                        <figure class="gallery_item_figure gallery_item_size_portrait">
                                            <div class="gallery_item_media">
                                            </div>
                                            <div class="gallery_item_body">
                                                <figcaption class="gallery_item_caption">
                                                    <p>Collaborate and accelerate AI breakthroughs – join the Researchers List</p>
                                                </figcaption>

                                                <div class="gallery_item_actions">
                                                    <div class="gallery_item_action">

                                                        <a href="#" class="gallery_item_link">
                                                            <span class="gallery_item_link_inner">
                                                                <span class="gallery_item_link_label">Optional Link</span>
                                                                <span class="gallery_item_link_icon" aria-hidden="true">

                                                                    <svg class="icon icon_chevron_right">
                                                                        <use href="/images/icons.svg#chevron_right" />
                                                                    </svg>

                                                                </span>
                                                            </span>
                                                        </a>
                                                    </div>
                                                    <div class="gallery_item_action">

                                                        <a href="#" class="gallery_item_link">
                                                            <span class="gallery_item_link_inner">
                                                                <span class="gallery_item_link_label">Optional Link</span>
                                                                <span class="gallery_item_link_icon" aria-hidden="true">

                                                                    <svg class="icon icon_chevron_right">
                                                                        <use href="/images/icons.svg#chevron_right" />
                                                                    </svg>

                                                                </span>
                                                            </span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END: Gallery -->

        <div class="news_related">
            <div class="news_related_header">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="news_related_header_inner">
                            <h2 class="news_related_title">Related News</h2>
                            <div class="news_related_action">

                                <a href="#" class="news_related_link">
                                    <span class="news_related_link_inner">
                                        <span class="news_related_link_label">View All News</span>
                                        <span class="news_related_link_icon" aria-hidden="true">

                                            <svg class="icon icon_arrow_right">
                                                <use href="/images/icons.svg#arrow_right" />
                                            </svg>

                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news_related_body">
                <div class="fs-row">
                    <div class="fs-cell">
                        <ul class="news_related_items" aria-label="Related News">
                            <li class="news_related_item">
                                <div class="news_card ">
                                    <div class="news_card_grid">
                                        <div class="news_card_grid_item is_media">
                                            <a href="#" aria-label="Machine learning helps scientists see how the brain adapts to different environments">
                                                <figure class="news_card_figure">

                                                    <img class="news_card_image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" sizes="(min-width: 1220px) 402px, (min-width: 740px) 445px, 90vw" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
                                                </figure>
                                            </a>
                                        </div>

                                        <div class="news_card_grid_item is_body">
                                            <div class="news_card_body">
                                                <div class="news_card_meta">
                                                    <div class="news_card_meta_item">
                                                        <a href="#">Data Science</a>
                                                    </div>

                                                </div>

                                                <div class="news_card_title_wrap">
                                                    <h2 class="news_card_title">

                                                        <a href="#" class="news_card_title_link">
                                                            <span class="news_card_title_link_inner">
                                                                <span class="news_card_title_link_label">Machine learning helps scientists see how the brain adapts to different environments</span>
                                                            </span>
                                                        </a>
                                                    </h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="news_related_item">
                                <div class="news_card ">
                                    <div class="news_card_grid">
                                        <div class="news_card_grid_item is_media">
                                            <a href="#" aria-label="Symposium explores AI’s boundless promise—and potential dangers">
                                                <figure class="news_card_figure">
                                                    <div class="news_card_figure_pill_wrap">
                                                        <div class="news_card_figure_pill">
                                                            Media Mention
                                                        </div>
                                                    </div>

                                                    <img class="news_card_image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" sizes="(min-width: 1220px) 402px, (min-width: 740px) 445px, 90vw" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
                                                </figure>
                                            </a>
                                        </div>

                                        <div class="news_card_grid_item is_body">
                                            <div class="news_card_body">
                                                <div class="news_card_meta">
                                                    <div class="news_card_meta_item">
                                                        <a href="#">Data Science</a>
                                                    </div>

                                                    <div class="news_card_meta_item">&bull;</div>

                                                    <div class="news_card_meta_item">
                                                        January 23rd, 2024
                                                    </div>
                                                </div>

                                                <div class="news_card_title_wrap">
                                                    <h2 class="news_card_title">

                                                        <a href="#" class="news_card_title_link">
                                                            <span class="news_card_title_link_inner">
                                                                <span class="news_card_title_link_label">Symposium explores AI’s boundless promise—and potential dangers</span><span class="icon_nowrap news_card_title_link_icon" aria-hidden="true">&#xfeff;
                                                                    <svg class="icon icon_external">
                                                                        <use href="/images/icons.svg#external" />
                                                                    </svg>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="news_related_item">
                                <div class="news_card ">
                                    <div class="news_card_grid">
                                        <div class="news_card_grid_item is_media">
                                            <a href="#" aria-label="Reddit users concerned by vaping health risks">
                                                <figure class="news_card_figure">

                                                    <img class="news_card_image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" sizes="(min-width: 1220px) 402px, (min-width: 740px) 445px, 90vw" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
                                                </figure>
                                            </a>
                                        </div>

                                        <div class="news_card_grid_item is_body">
                                            <div class="news_card_body">

                                                <div class="news_card_title_wrap">
                                                    <h2 class="news_card_title">

                                                        <a href="#" class="news_card_title_link">
                                                            <span class="news_card_title_link_inner">
                                                                <span class="news_card_title_link_label">Reddit users concerned by vaping health risks</span>
                                                            </span>
                                                        </a>
                                                    </h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- END: Related News -->

        <!-- Event Feature -->
        <div class="upcoming_event_block">
            <div class="upcoming_event_block_header">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="upcoming_event_block_header_inner">
                            <h2 class="upcoming_event_block_title">Upcoming Event</h2>
                            <div class="upcoming_event_block_action">

                                <a href="#" class="upcoming_event_block_link">
                                    <span class="upcoming_event_block_link_inner">
                                        <span class="upcoming_event_block_link_label">View All Events</span>
                                        <span class="upcoming_event_block_link_icon" aria-hidden="true">

                                            <svg class="icon icon_arrow_right">
                                                <use href="/images/icons.svg#arrow_right" />
                                            </svg>

                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="upcoming_event_body">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="upcoming_event_block_inner">
                            <div class="upcoming_event">
                                <figure class="upcoming_event_figure">
                                    <a class="upcoming_event_figure_link" href="#" aria-label="Read more about In Enim Justo Rhoncus Ut" tabindex="-1">

                                        <img class="upcoming_event_figure_image" srcset="https://images.fastspot.com/framework/980x735/1 980w, https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
                                    </a>
                                </figure>
                                <div class="upcoming_event_wrapper">
                                    <div class="upcoming_event_header">
                                        <h2 class="upcoming_event_title">

                                            <a href="#" class="upcoming_event_title_link">
                                                <span class="upcoming_event_title_link_inner">
                                                    <span class="upcoming_event_title_link_label">In Enim Justo Rhoncus Ut</span>
                                                </span>
                                            </a>
                                        </h2>
                                    </div>
                                    <div class="upcoming_event_body">
                                        <div class="upcoming_event_details">
                                            <div class="upcoming_event_detail">
                                                <span class="upcoming_event_detail_hint">Time:&nbsp;</span>
                                                <span class="upcoming_event_detail_label">
                                                    <span class="upcoming_event_detail_label_date">May 31, 2023 - May 31, 2023</span>
                                                </span>
                                            </div>
                                            <div class="upcoming_event_detail">
                                                <span class="upcoming_event_detail_hint">Location:&nbsp;</span>
                                                <span class="upcoming_event_detail_label">Johns Hopkins Homewood campus</span>
                                            </div>
                                        </div>
                                        <div class="upcoming_event_description">
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END: Event Feature -->
    </div>
    <!-- END: Full Width Callouts -->
</div>
<!-- Page Content -->
<div class="page_content">
	<!-- Full Width Callouts -->
	<div class="full_width_callouts">
		{% render '@component-spotlight-basic' %}

		{% render '@component-visual-cta' with {
			rows: [
				{
					layout: '70_30',
					items: [
						{
							image: '1',
							alt: '',
							video: {
								type: 'youtube',
								id: 'XPjQhvjQbSM',
								title: 'Fastspot, Our Methodology'
							},
							caption:
								'The Johns Hopkins Data Science and AI Institute advances the intentional collaboration of humans and artificial intelligence, combining the strengths of each and building on trustworthy datasets to understand and improve the human condition.',
							links: [
								{
									title: 'Join Our Researchers List',
									url: '#',
									icon: 'chevron_right',
								}
							]
						},
						{
							alt: '',
							caption:
								'Collaborate and accelerate AI breakthroughs – join the Researchers List',
							links: [
								{
									title: 'Optional Link',
									url: '#',
									icon: 'chevron_right',
								},
								{
									title: 'Optional Link',
									url: '#',
									icon: 'chevron_right',
								}
							]
						}
					]
				},
			]
		} %}

		{% render '@component-related-news' %}

		{% render '@component-upcoming-event' %}
	</div>
	<!-- END: Full Width Callouts -->
</div>

No notes defined.