<div class="spotlight">
<div class="spotlight_hat">
<div class="spotlight_hat_media">
<div class="spotlight_hat_media_inner">
<div class="spotlight_hat_video">
<div class="full_media full_media_has_video">
<figure class="full_media_figure">
<picture class="full_media_picture">
<source media="(min-width: 1200px)" srcset="https://images.fastspot.com/merced/1440x810/1">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/merced/1220x686/1">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/merced/980x552/1">
<img class="full_media_image" src="//images.fastspot.com/merced/735x980/1" alt="" loading="eager" width="735" height="980">
</picture>
</figure>
<div class="js-background-video-wrapper full_media_video" data-background-video='{"autoplay":true,"display":"background","id":"AjEwsxtp-yg","type":"youtube","title":"video","playerVars":{"loop":1}}'>
<div class="full_media_iframe_wrapper">
<div class="js-iframe-target full_media_iframe"></div>
</div>
<div class="full_media_video_controls">
<div class="fs-row">
<div class="fs-cell">
<div class="full_media_video_controls_inner">
<div class="full_media_video_controls_bubble">
<div class="full_media_video_control">
<button class="full_media_video_play_button js-full-media-video-play-button">
<span class="full_media_video_play_button_inner">
<span class="full_media_video_play_button_label">Play Video</span>
<span class="full_media_video_play_button_icon" aria-hidden="true"><span class="full_media_video_play_button_icon_inner">
<i class="fa-regular fa-play"></i>
</span>
</span>
</button>
</div>
<div class="full_media_video_control">
<button class="full_media_video_pause_button js-full-media-video-pause-button">
<span class="full_media_video_pause_button_inner">
<span class="full_media_video_pause_button_label">Pause Video</span>
<span class="full_media_video_pause_button_icon" aria-hidden="true"><span class="full_media_video_pause_button_icon_inner">
<i class="fa-regular fa-pause"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="spotlight_hat_body">
<div class="fs-row">
<div class="fs-cell">
<div class="spotlight_hat_inner">
<h1 class="spotlight_hat_title" id="page_title">Made in Merced. <em>Built for the World.</em></h1>
</div>
</div>
</div>
</div>
</div>
<div class="spotlight_header">
<div class="fs-row">
<div class="fs-cell">
<h2 class="spotlight_title">I want to...</h2>
</div>
</div>
</div>
<div class="spotlight_body">
<div class="fs-row">
<div class="fs-cell">
<div class="spotlight_rows">
<div class="spotlight_row">
<button class="js-spotlight spotlight_row_title" data-swap-linked="spotlight_1" data-swap-target=".spotlight_modal_1">
<span class="spotlight_row_title_label">Enroll at Merced College</span>
<span class="spotlight_row_title_icons">
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
</span>
</button>
<span class="spotlight_teaser_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/980x735/1 980w, https://images.fastspot.com/merced/740x555/1 740w" src="https://images.fastspot.com/merced/740x555/1" alt="" loading="lazy" width="740" height="555">
</span>
<div class="spotlight_modal spotlight_modal_1">
<div class="spotlight_modal_bg js-spotlight-bg"></div>
<div class="spotlight_modal_inner">
<div class="spotlight_modal_body">
<div class="spotlight_modal_header">
<h3 class="spotlight_modal_title">Enroll at Merced</h3>
<div class="spotlight_modal_caption">
Take the first step and explore how you can get started at Merced.
</div>
</div>
<div class="spotlight_cards">
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/1 740w, https://images.fastspot.com/merced/500x282/1 500w, https://images.fastspot.com/merced/300x169/1 300w" src="https://images.fastspot.com/merced/300x169/1" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Apply Today</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/2 740w, https://images.fastspot.com/merced/500x282/2 500w, https://images.fastspot.com/merced/300x169/2 300w" src="https://images.fastspot.com/merced/300x169/2" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Talk to a Counselor</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/3 740w, https://images.fastspot.com/merced/500x282/3 500w, https://images.fastspot.com/merced/300x169/3 300w" src="https://images.fastspot.com/merced/300x169/3" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Enrollment Process</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/4 740w, https://images.fastspot.com/merced/500x282/4 500w, https://images.fastspot.com/merced/300x169/4 300w" src="https://images.fastspot.com/merced/300x169/4" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Explore Enrollment Support</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<button class="js-swap spotlight_modal_close" data-swap-linked="spotlight_1" data-swap-target=".spotlight_modal_1">
<span class="spotlight_modal_close_icon">
<i class="fa-regular fa-xmark"></i>
</span>
<span class="spotlight_modal_close_label">Close</span>
</button>
</div>
</div>
<div class="spotlight_row">
<button class="js-spotlight spotlight_row_title" data-swap-linked="spotlight_2" data-swap-target=".spotlight_modal_2">
<span class="spotlight_row_title_label">Register for Classes</span>
<span class="spotlight_row_title_icons">
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
</span>
</button>
<span class="spotlight_teaser_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/980x735/2 980w, https://images.fastspot.com/merced/740x555/2 740w" src="https://images.fastspot.com/merced/740x555/2" alt="" loading="lazy" width="740" height="555">
</span>
<div class="spotlight_modal spotlight_modal_2">
<div class="spotlight_modal_bg js-spotlight-bg"></div>
<div class="spotlight_modal_inner">
<div class="spotlight_modal_body">
<div class="spotlight_modal_header">
<h3 class="spotlight_modal_title">Register for Classes</h3>
<div class="spotlight_modal_caption">
Take the first step and explore how you can get started at Merced.
</div>
</div>
<div class="spotlight_cards">
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/1 740w, https://images.fastspot.com/merced/500x282/1 500w, https://images.fastspot.com/merced/300x169/1 300w" src="https://images.fastspot.com/merced/300x169/1" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Apply Today</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/2 740w, https://images.fastspot.com/merced/500x282/2 500w, https://images.fastspot.com/merced/300x169/2 300w" src="https://images.fastspot.com/merced/300x169/2" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Talk to a Counselor</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/3 740w, https://images.fastspot.com/merced/500x282/3 500w, https://images.fastspot.com/merced/300x169/3 300w" src="https://images.fastspot.com/merced/300x169/3" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Enrollment Process</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/4 740w, https://images.fastspot.com/merced/500x282/4 500w, https://images.fastspot.com/merced/300x169/4 300w" src="https://images.fastspot.com/merced/300x169/4" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Explore Enrollment Support</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<button class="js-swap spotlight_modal_close" data-swap-linked="spotlight_2" data-swap-target=".spotlight_modal_2">
<span class="spotlight_modal_close_icon">
<i class="fa-regular fa-xmark"></i>
</span>
<span class="spotlight_modal_close_label">Close</span>
</button>
</div>
</div>
<div class="spotlight_row">
<button class="js-spotlight spotlight_row_title" data-swap-linked="spotlight_3" data-swap-target=".spotlight_modal_3">
<span class="spotlight_row_title_label">Explore Programs</span>
<span class="spotlight_row_title_icons">
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
</span>
</button>
<span class="spotlight_teaser_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/980x735/3 980w, https://images.fastspot.com/merced/740x555/3 740w" src="https://images.fastspot.com/merced/740x555/3" alt="" loading="lazy" width="740" height="555">
</span>
<div class="spotlight_modal spotlight_modal_3">
<div class="spotlight_modal_bg js-spotlight-bg"></div>
<div class="spotlight_modal_inner">
<div class="spotlight_modal_body">
<div class="spotlight_modal_header">
<h3 class="spotlight_modal_title">Explore Programs</h3>
<div class="spotlight_modal_caption">
Take the first step and explore how you can get started at Merced.
</div>
</div>
<div class="spotlight_cards">
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/1 740w, https://images.fastspot.com/merced/500x282/1 500w, https://images.fastspot.com/merced/300x169/1 300w" src="https://images.fastspot.com/merced/300x169/1" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Apply Today</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/2 740w, https://images.fastspot.com/merced/500x282/2 500w, https://images.fastspot.com/merced/300x169/2 300w" src="https://images.fastspot.com/merced/300x169/2" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Talk to a Counselor</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/3 740w, https://images.fastspot.com/merced/500x282/3 500w, https://images.fastspot.com/merced/300x169/3 300w" src="https://images.fastspot.com/merced/300x169/3" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Enrollment Process</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/4 740w, https://images.fastspot.com/merced/500x282/4 500w, https://images.fastspot.com/merced/300x169/4 300w" src="https://images.fastspot.com/merced/300x169/4" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Explore Enrollment Support</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<button class="js-swap spotlight_modal_close" data-swap-linked="spotlight_3" data-swap-target=".spotlight_modal_3">
<span class="spotlight_modal_close_icon">
<i class="fa-regular fa-xmark"></i>
</span>
<span class="spotlight_modal_close_label">Close</span>
</button>
</div>
</div>
<div class="spotlight_row">
<button class="js-spotlight spotlight_row_title" data-swap-linked="spotlight_4" data-swap-target=".spotlight_modal_4">
<span class="spotlight_row_title_label">Learn about Support Services</span>
<span class="spotlight_row_title_icons">
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
</span>
</button>
<span class="spotlight_teaser_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/980x735/1 980w, https://images.fastspot.com/merced/740x555/1 740w" src="https://images.fastspot.com/merced/740x555/1" alt="" loading="lazy" width="740" height="555">
</span>
<div class="spotlight_modal spotlight_modal_4">
<div class="spotlight_modal_bg js-spotlight-bg"></div>
<div class="spotlight_modal_inner">
<div class="spotlight_modal_body">
<div class="spotlight_modal_header">
<h3 class="spotlight_modal_title">Learn about Support Services</h3>
<div class="spotlight_modal_caption">
Take the first step and explore how you can get started at Merced.
</div>
</div>
<div class="spotlight_cards">
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/1 740w, https://images.fastspot.com/merced/500x282/1 500w, https://images.fastspot.com/merced/300x169/1 300w" src="https://images.fastspot.com/merced/300x169/1" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Apply Today</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/2 740w, https://images.fastspot.com/merced/500x282/2 500w, https://images.fastspot.com/merced/300x169/2 300w" src="https://images.fastspot.com/merced/300x169/2" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Talk to a Counselor</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/3 740w, https://images.fastspot.com/merced/500x282/3 500w, https://images.fastspot.com/merced/300x169/3 300w" src="https://images.fastspot.com/merced/300x169/3" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Enrollment Process</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/4 740w, https://images.fastspot.com/merced/500x282/4 500w, https://images.fastspot.com/merced/300x169/4 300w" src="https://images.fastspot.com/merced/300x169/4" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Explore Enrollment Support</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<button class="js-swap spotlight_modal_close" data-swap-linked="spotlight_4" data-swap-target=".spotlight_modal_4">
<span class="spotlight_modal_close_icon">
<i class="fa-regular fa-xmark"></i>
</span>
<span class="spotlight_modal_close_label">Close</span>
</button>
</div>
</div>
<div class="spotlight_row">
<button class="js-spotlight spotlight_row_title" data-swap-linked="spotlight_5" data-swap-target=".spotlight_modal_5">
<span class="spotlight_row_title_label">Explore Campus Life & Athletics</span>
<span class="spotlight_row_title_icons">
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
</span>
</button>
<span class="spotlight_teaser_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/980x735/2 980w, https://images.fastspot.com/merced/740x555/2 740w" src="https://images.fastspot.com/merced/740x555/2" alt="" loading="lazy" width="740" height="555">
</span>
<div class="spotlight_modal spotlight_modal_5">
<div class="spotlight_modal_bg js-spotlight-bg"></div>
<div class="spotlight_modal_inner">
<div class="spotlight_modal_body">
<div class="spotlight_modal_header">
<h3 class="spotlight_modal_title">Explore Campus Life & Athletics</h3>
<div class="spotlight_modal_caption">
Take the first step and explore how you can get started at Merced.
</div>
</div>
<div class="spotlight_cards">
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/1 740w, https://images.fastspot.com/merced/500x282/1 500w, https://images.fastspot.com/merced/300x169/1 300w" src="https://images.fastspot.com/merced/300x169/1" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Apply Today</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/2 740w, https://images.fastspot.com/merced/500x282/2 500w, https://images.fastspot.com/merced/300x169/2 300w" src="https://images.fastspot.com/merced/300x169/2" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Talk to a Counselor</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/3 740w, https://images.fastspot.com/merced/500x282/3 500w, https://images.fastspot.com/merced/300x169/3 300w" src="https://images.fastspot.com/merced/300x169/3" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Enrollment Process</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x416/4 740w, https://images.fastspot.com/merced/500x282/4 500w, https://images.fastspot.com/merced/300x169/4 300w" src="https://images.fastspot.com/merced/300x169/4" alt="" loading="lazy" width="300" height="169">
</span>
<figcaption class="spotlight_card_figcaption">
<a href="" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">Explore Enrollment Support</span>
</span>
</a>
<div class="spotlight_card_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel libero purus.
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<button class="js-swap spotlight_modal_close" data-swap-linked="spotlight_5" data-swap-target=".spotlight_modal_5">
<span class="spotlight_modal_close_icon">
<i class="fa-regular fa-xmark"></i>
</span>
<span class="spotlight_modal_close_label">Close</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="spotlight">
<div class="spotlight_hat">
<div class="spotlight_hat_media">
<div class="spotlight_hat_media_inner">
<div class="spotlight_hat_video">
{% include '@component-full-media' with {
image: image,
video: video,
} %}
</div>
</div>
</div>
<div class="spotlight_hat_body">
<div class="fs-row">
<div class="fs-cell">
<div class="spotlight_hat_inner">
<h1 class="spotlight_hat_title" id="page_title">{{ title }}</h1>
</div>
</div>
</div>
</div>
</div>
<div class="spotlight_header">
<div class="fs-row">
<div class="fs-cell">
<h2 class="spotlight_title">I want to...</h2>
</div>
</div>
</div>
<div class="spotlight_body">
<div class="fs-row">
<div class="fs-cell">
<div class="spotlight_rows">
{% for item in items %}
<div class="spotlight_row">
<button class="js-spotlight spotlight_row_title" data-swap-linked="spotlight_{{ loop.index }}" data-swap-target=".spotlight_modal_{{ loop.index }}">
<span class="spotlight_row_title_label">{{ item.title }}</span>
<span class="spotlight_row_title_icons">
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
<span class="spotlight_row_title_icon">
<i class="fa-regular fa-arrow-right"></i>
</span>
</span>
</button>
<span class="spotlight_teaser_media">
{% include '@component-image' with {
class: 'topic',
alt: '',
image: item.teaser,
loading: 'lazy',
sources: [
img.full.med,
img.full.sml,
]
} %}
</span>
<div class="spotlight_modal spotlight_modal_{{ loop.index }}">
<div class="spotlight_modal_bg js-spotlight-bg"></div>
<div class="spotlight_modal_inner">
<div class="spotlight_modal_body">
<div class="spotlight_modal_header">
<h3 class="spotlight_modal_title">{{ item.modal.title }}</h3>
<div class="spotlight_modal_caption">
{{ item.modal.description }}
</div>
</div>
<div class="spotlight_cards">
{% for card in item.modal.cards %}
<div class="spotlight_card">
<div class="spotlight_card_inner">
<figure class="spotlight_card_figure" aria-hidden="true">
<span class="spotlight_card_media">
{% include '@component-image' with {
class: 'topic',
alt: '',
image: card.image,
loading: 'lazy',
sources: [
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
]
} %}
</span>
<figcaption class="spotlight_card_figcaption">
<a href="{{ card.url }}" class="spotlight_card_link">
<span class="spotlight_card_link_inner">
<span class="spotlight_card_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="spotlight_card_link_label">{{ card.title }}</span>
</span>
</a>
<div class="spotlight_card_description">
{{ card.description }}
</div>
</figcaption>
</figure>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<button class="js-swap spotlight_modal_close" data-swap-linked="spotlight_{{ loop.index }}" data-swap-target=".spotlight_modal_{{ loop.index }}">
<span class="spotlight_modal_close_icon">
<i class="fa-regular fa-xmark"></i>
</span>
<span class="spotlight_modal_close_label">Close</span>
</button>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.