<div class="sights_sounds js-sights-sounds" data-uuid="sights-sounds-1">
    <div class="sights_sounds_bg_media_wrap">
        <div class="sights_sounds_figure">

            <picture class="sights_sounds_bg_picture">
                <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/paul-smiths-college/1440x810/1" width="1440" height="810">
                <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/1220x686/1" width="1220" height="686">
                <img class="sights_sounds_bg_image" src="//images.fastspot.com/paul-smiths-college/814x1220/1" alt="" loading="lazy" width="814" height="1220">
            </picture>

            <div class="sights_sounds_bg_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"6GH_OJmfifo","type":"youtube","title":null,"display":"background","autoplay":false,"load_strategy":"none","playerVars":{}}'>
                <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=6GH_OJmfifo" aria-label="Play ">

                    <svg class="icon icon_play_triangle">
                        <use href="/images/icons.svg#play_triangle" />
                    </svg>

                </a>
                <div class="lazy_video_iframe_wrap">
                    <div class="lazy_video_iframe_target js-iframe-target"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="sights_sounds_body">
        <div class="fs-row fs-xl-justify-center">
            <div class="fs-cell fs-xl-10">
                <div class="sights_sounds_body_inner">
                    <header class="sights_sounds_head">
                        <h1 class="visually_hide" id="header_title">The College of the Adirondacks</h1>

                        <div class="sights_sounds_title_icon_wrap">

                            <svg class="icon icon_text_the_college_of_the_adirondacks">
                                <use href="/images/icons.svg#text_the_college_of_the_adirondacks" />
                            </svg>

                        </div>
                    </header>

                    <div class="js-carousel-embla">
                        <div class="sights_sounds_content">
                            <div class="sights_sounds_content_grid">
                                <div class="sights_sounds_content_grid_item is_btn_toggle">
                                    <div class="sights_sounds_btn_group">
                                        <button class="sights_sounds_item_btn" data-js="bg-btn-pause" aria-label="Pause Video">

                                            <svg class="icon icon_carousel_pause">
                                                <use href="/images/icons.svg#carousel_pause" />
                                            </svg>

                                        </button>

                                        <button class="sights_sounds_item_btn is_active" data-js="bg-btn-play" aria-label="Play Video">

                                            <svg class="icon icon_carousel_play">
                                                <use href="/images/icons.svg#carousel_play" />
                                            </svg>

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

                                <div class="sights_sounds_content_grid_item is_slides">
                                    <a href="#sights-sounds-pagination-1" class="visually_hide" aria-label="Skip to Pagination"></a>
                                    <a href="#sights-sounds-dots-1" class="visually_hide" aria-label="Skip to Dots"></a>
                                    <div class="embla" data-carousel-embla='{"slidesToScroll":1}'>
                                        <div id="sights-sounds-viewport-1" class="embla__viewport" data-js="viewport">
                                            <ul class="embla__container" data-js="container">

                                                <li class="embla__slide" data-js="slide" data-uniqid="sights-sounds-slide-1">

                                                    <div class="sights_sounds_item ">
                                                        <div class="sights_sounds_item_grid">
                                                            <div class="sights_sounds_item_grid_item is_left">
                                                                <div class="sights_sounds_item_content">
                                                                    <div class="sights_sounds_item_label">Sights &amp; Sounds</div>
                                                                    <h2 class="sights_sounds_item_title">
                                                                        At the Shores of Lower St. Regis Lake
                                                                    </h2>
                                                                    <div class="sights_sounds_item_desc">
                                                                        <div class="typography">
                                                                            <p>Did you know that you could canoe or kayak from our lakeside campus all of the way to the Statue of Liberty in New York City? Within a few miles of our residence halls lie 240 lakes, streams and beaches offering world-class water sports and prime picnic spots.</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="sights_sounds_item_grid_item is_right">
                                                                <figure class="sights_sounds_item_figure">

                                                                    <picture class="sights_sounds_item_picture">
                                                                        <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/915x1220/2" width="915" height="1220">
                                                                        <img class="sights_sounds_item_image" src="//images.fastspot.com/paul-smiths-college/980x552/2" alt="" loading="lazy" width="980" height="552">
                                                                    </picture>

                                                                    <div class="sights_sounds_item_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"8L2x7aGNmD0","type":"youtube","title":null,"display":"background","autoplay":false,"load_strategy":"none","playerVars":{}}'>
                                                                        <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=8L2x7aGNmD0" aria-label="Play ">

                                                                            <svg class="icon icon_play_triangle">
                                                                                <use href="/images/icons.svg#play_triangle" />
                                                                            </svg>

                                                                        </a>
                                                                        <div class="lazy_video_iframe_wrap">
                                                                            <div class="lazy_video_iframe_target js-iframe-target"></div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sights_sounds_item_btn_group">
                                                                        <button class="sights_sounds_item_btn" data-js="btn-pause" aria-label="Pause Video">

                                                                            <svg class="icon icon_carousel_pause">
                                                                                <use href="/images/icons.svg#carousel_pause" />
                                                                            </svg>

                                                                        </button>

                                                                        <button class="sights_sounds_item_btn is_active" data-js="btn-play" aria-label="Play Video">

                                                                            <svg class="icon icon_carousel_play">
                                                                                <use href="/images/icons.svg#carousel_play" />
                                                                            </svg>

                                                                        </button>
                                                                    </div>
                                                                </figure>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li class="embla__slide" data-js="slide" data-uniqid="sights-sounds-slide-2">

                                                    <div class="sights_sounds_item ">
                                                        <div class="sights_sounds_item_grid">
                                                            <div class="sights_sounds_item_grid_item is_left">
                                                                <div class="sights_sounds_item_content">
                                                                    <div class="sights_sounds_item_label">Sights &amp; Sounds</div>
                                                                    <h2 class="sights_sounds_item_title">
                                                                        Incididunt esse aute eu ea nulla et.
                                                                    </h2>
                                                                    <div class="sights_sounds_item_desc">
                                                                        <div class="typography">
                                                                            <p>Voluptate veniam quis ipsum officia nulla sint in sit sit irure excepteur nulla cillum anim. Incididunt esse eiusmod veniam nostrud ipsum duis.</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="sights_sounds_item_grid_item is_right">
                                                                <figure class="sights_sounds_item_figure">

                                                                    <picture class="sights_sounds_item_picture">
                                                                        <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/915x1220/3" width="915" height="1220">
                                                                        <img class="sights_sounds_item_image" src="//images.fastspot.com/paul-smiths-college/980x552/3" alt="" loading="lazy" width="980" height="552">
                                                                    </picture>

                                                                </figure>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li class="embla__slide" data-js="slide" data-uniqid="sights-sounds-slide-3">

                                                    <div class="sights_sounds_item ">
                                                        <div class="sights_sounds_item_grid">
                                                            <div class="sights_sounds_item_grid_item is_left">
                                                                <div class="sights_sounds_item_content">
                                                                    <div class="sights_sounds_item_label">Sights &amp; Sounds</div>
                                                                    <h2 class="sights_sounds_item_title">
                                                                        Quis irure eiusmod proident velit
                                                                    </h2>
                                                                    <div class="sights_sounds_item_desc">
                                                                        <div class="typography">
                                                                            <p>In labore et magna excepteur quis veniam. Reprehenderit consequat eiusmod adipisicing ex ut do id voluptate excepteur et non exercitation.</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="sights_sounds_item_grid_item is_right">
                                                                <figure class="sights_sounds_item_figure">

                                                                    <picture class="sights_sounds_item_picture">
                                                                        <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/915x1220/4" width="915" height="1220">
                                                                        <img class="sights_sounds_item_image" src="//images.fastspot.com/paul-smiths-college/980x552/4" alt="" loading="lazy" width="980" height="552">
                                                                    </picture>

                                                                    <div class="sights_sounds_item_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"qa3Qo6wgiuw","type":"youtube","title":null,"display":"background","autoplay":false,"load_strategy":"none","playerVars":{}}'>
                                                                        <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=qa3Qo6wgiuw" aria-label="Play ">

                                                                            <svg class="icon icon_play_triangle">
                                                                                <use href="/images/icons.svg#play_triangle" />
                                                                            </svg>

                                                                        </a>
                                                                        <div class="lazy_video_iframe_wrap">
                                                                            <div class="lazy_video_iframe_target js-iframe-target"></div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sights_sounds_item_btn_group">
                                                                        <button class="sights_sounds_item_btn" data-js="btn-pause" aria-label="Pause Video">

                                                                            <svg class="icon icon_carousel_pause">
                                                                                <use href="/images/icons.svg#carousel_pause" />
                                                                            </svg>

                                                                        </button>

                                                                        <button class="sights_sounds_item_btn is_active" data-js="btn-play" aria-label="Play Video">

                                                                            <svg class="icon icon_carousel_play">
                                                                                <use href="/images/icons.svg#carousel_play" />
                                                                            </svg>

                                                                        </button>
                                                                    </div>
                                                                </figure>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li class="embla__slide" data-js="slide" data-uniqid="sights-sounds-slide-4">

                                                    <div class="sights_sounds_item is_audio_only">
                                                        <div class="sights_sounds_item_grid">
                                                            <div class="sights_sounds_item_grid_item is_left">
                                                                <div class="sights_sounds_item_content">
                                                                    <div class="sights_sounds_item_label">Sights &amp; Sounds</div>
                                                                    <h2 class="sights_sounds_item_title">
                                                                        Officia anim duis aliquip labore officia
                                                                    </h2>
                                                                    <div class="sights_sounds_item_desc">
                                                                        <div class="typography">
                                                                            <p>Labore aliqua aute proident voluptate sit.</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="sights_sounds_item_grid_item is_right">
                                                                <figure class="sights_sounds_item_figure">

                                                                    <picture class="sights_sounds_item_picture">
                                                                        <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/915x1220/5" width="915" height="1220">
                                                                        <img class="sights_sounds_item_image" src="//images.fastspot.com/paul-smiths-college/980x552/5" alt="" loading="lazy" width="980" height="552">
                                                                    </picture>

                                                                    <div class="sights_sounds_item_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"L6jiezlsbhs","type":"youtube","title":null,"display":"background","autoplay":false,"load_strategy":"none","playerVars":{}}'>
                                                                        <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=L6jiezlsbhs" aria-label="Play ">

                                                                            <svg class="icon icon_play_triangle">
                                                                                <use href="/images/icons.svg#play_triangle" />
                                                                            </svg>

                                                                        </a>
                                                                        <div class="lazy_video_iframe_wrap">
                                                                            <div class="lazy_video_iframe_target js-iframe-target"></div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sights_sounds_item_audio_btn_group">
                                                                        <button type="button" class="sights_sounds_item_audio_btn" data-js="btn-pause" aria-label="Pause Audio">
                                                                            <span class="sights_sounds_item_audio_btn_icon">

                                                                                <svg class="icon icon_carousel_mute">
                                                                                    <use href="/images/icons.svg#carousel_mute" />
                                                                                </svg>

                                                                            </span>

                                                                            <span class="sights_sounds_item_audio_btn_label">
                                                                                Hear sounds from Lower St. Regis Lake
                                                                            </span>
                                                                        </button>

                                                                        <button type="button" class="sights_sounds_item_audio_btn" data-js="btn-play" aria-label="Play Audio">
                                                                            <span class="sights_sounds_item_audio_btn_icon">

                                                                                <svg class="icon icon_carousel_unmute">
                                                                                    <use href="/images/icons.svg#carousel_unmute" />
                                                                                </svg>

                                                                            </span>

                                                                            <span class="sights_sounds_item_audio_btn_label">
                                                                                Hear sounds from Lower St. Regis Lake
                                                                            </span>
                                                                        </button>
                                                                    </div>
                                                                </figure>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="sights_sounds_content_grid_item is_controls">
                                    <div id="sights-sounds-pagination-1" class="embla__controls">
                                        <button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide" aria-controls="sights-sounds-viewport-1">

                                            <svg class="icon icon_arrow_carousel_left">
                                                <use href="/images/icons.svg#arrow_carousel_left" />
                                            </svg>

                                        </button>

                                        <button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide" aria-controls="sights-sounds-viewport-1">

                                            <svg class="icon icon_arrow_carousel_right">
                                                <use href="/images/icons.svg#arrow_carousel_right" />
                                            </svg>

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

                                <div class="sights_sounds_content_grid_item is_dots">
                                    <div id="sights-sounds-dots-1" class="embla__dots" data-js="dots" role="navigation" aria-controls="sights-sounds-viewport-1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% set carousel_json = {
	slidesToScroll: 1
}|json_encode %}

{% set uuid = uniqid("sights-sounds") %}
{% set uuid_viewport = uniqid("sights-sounds-viewport") %}
{% set uuid_title = uniqid("sights-sounds-title") %}
{% set uuid_pagination = uniqid("sights-sounds-pagination") %}
{% set uuid_dots = uniqid("sights-sounds-dots") %}

<div class="sights_sounds js-sights-sounds" data-uuid="{{ uuid }}">
	<div class="sights_sounds_bg_media_wrap">
		<div class="sights_sounds_figure">
			{% include '@partial-picture' with {
				class: 'sights_sounds_bg',
				image: background_image,
				alt: '',
				loading: 'lazy',
				default: img.portraitClassic.lrg,
				sources: {
					'1200px': img.wide.xlrg,
					'980px': img.wide.lrg
				}
			} %}

			{% if background_video.id %}
				{% include "@partial-lazy-video" with {
					class: "sights_sounds_bg",
					id: background_video.id,
					type: background_video.type,
					display: "background",
					autoplay: background_video.autoplay|default(false),
					title: background_video.title,
					load_strategy: "none",
					playerVars: {}
				} %}
			{% endif %}
		</div>
	</div>

	<div class="sights_sounds_body">
		<div class="fs-row fs-xl-justify-center">
			<div class="fs-cell fs-xl-10">
				<div class="sights_sounds_body_inner">
					<header class="sights_sounds_head">
						<h1 class="visually_hide" id="header_title">The College of the Adirondacks</h1>

						<div class="sights_sounds_title_icon_wrap">
							{{ icon("text_the_college_of_the_adirondacks") }}
						</div>
					</header>

					<div class="js-carousel-embla">
						<div class="sights_sounds_content">
							<div class="sights_sounds_content_grid">
								<div class="sights_sounds_content_grid_item is_btn_toggle">
									<div class="sights_sounds_btn_group">
										<button class="sights_sounds_item_btn" data-js="bg-btn-pause" aria-label="Pause Video">
											{{ icon("carousel_pause") }}
										</button>

										<button class="sights_sounds_item_btn is_active" data-js="bg-btn-play" aria-label="Play Video">
											{{ icon("carousel_play") }}
										</button>
									</div>
								</div>

								<div class="sights_sounds_content_grid_item is_slides">
									<a href="#{{ uuid_pagination }}" class="visually_hide" aria-label="Skip to Pagination"></a>
									<a href="#{{ uuid_dots }}" class="visually_hide" aria-label="Skip to Dots"></a>
									<div
										class="embla"
										data-carousel-embla='{{ carousel_json }}'
									>
										<div
											id="{{ uuid_viewport }}"
											class="embla__viewport"
											data-js="viewport"
										>
											<ul class="embla__container" data-js="container">
												{% for item in items %}
													{% set uuid_slide = uniqid("sights-sounds-slide") %}

													<li class="embla__slide" data-js="slide" data-uniqid="{{ uuid_slide }}">
														{% include "@partial-sights-sounds-item" with {
															item: item,
															items_label: items_label
														} %}
													</li>
												{% endfor %}
											</ul>
										</div>
									</div>
								</div>

								<div class="sights_sounds_content_grid_item is_controls">
									<div id="{{ uuid_pagination }}" class="embla__controls">
										<button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide" aria-controls="{{ uuid_viewport }}">
											{{ icon("arrow_carousel_left") }}
										</button>

										<button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide" aria-controls="{{ uuid_viewport }}">
											{{ icon("arrow_carousel_right") }}
										</button>
									</div>
								</div>

								<div class="sights_sounds_content_grid_item is_dots">
									<div id="{{ uuid_dots }}" class="embla__dots" data-js="dots" role="navigation" aria-controls="{{ uuid_viewport }}"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.