<div class="card_carousel component_theme_green component_spacing_padding">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="card_carousel_inner">
                <header class="card_carousel_header">
                    <div class="card_carousel_header_grid">
                        <div class="card_carousel_header_grid_item is_left">
                            <div class="card_carousel_header_label">
                                The Smitty Story
                            </div>

                            <h1 class="card_carousel_header_title">
                                A Story Under Every Stone
                            </h1>
                        </div>

                        <div class="card_carousel_header_grid_item is_right">
                            <div class="card_carousel_header_desc">
                                <p>Our students and alumni are true to themselves: their differences, passions, and goals. They revel in fresh experiences, camaraderie, and adventure—and each have a unique story to tell.</p>
                            </div>
                        </div>
                    </div>
                </header>

                <div class="card_carousel_body">
                    <div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{"loop":false,"slidesToScroll":1,"breakpoints":{"(min-width: 740px)":{"slidesToScroll":2},"(min-width: 980px)":{"slidesToScroll":3}}}'>
                        <div id="card-carousel-viewport-4" class="embla__viewport" data-js="viewport">
                            <ul class="embla__container" data-js="container">
                                <li class="embla__slide embla_slide--type-topic">
                                    <div class="card_carousel_item_topic">
                                        <div class="card_carousel_item_topic_grid">
                                            <div class="card_carousel_item_topic_grid_item is_media">
                                                <figure class="card_carousel_item_topic_figure">

                                                    <img class="card_carousel_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x980/1 980w, https://images.fastspot.com/paul-smiths-college/740x740/1 740w, https://images.fastspot.com/paul-smiths-college/500x500/1 500w, https://images.fastspot.com/paul-smiths-college/300x300/1 300w, https://images.fastspot.com/paul-smiths-college/100x100/1 100w" sizes="(min-width: 980px) 466px, (min-width: 740px) 350px, 95vw" src="https://images.fastspot.com/paul-smiths-college/100x100/1" alt="" loading="lazy" width="100" height="100">
                                                </figure>
                                            </div>

                                            <div class="card_carousel_item_topic_grid_item is_content">
                                                <div class="card_carousel_item_topic_content">
                                                    <h3 class="card_carousel_item_topic_title">
                                                        Sustainability
                                                    </h3>

                                                    <div class="card_carousel_item_topic_desc">
                                                        <p>We lead the national conversation around sustainability and climate advocacy. But we aren’t just talk—our programs of study provide opportunity to honor, explore, and impact the world around us for the better.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide embla_slide--type-quote">
                                    <div class="card_carousel_item_quote">
                                        <div class="card_carousel_item_quote_grid">
                                            <div class="card_carousel_item_quote_grid_item is_content">
                                                <div class="card_carousel_item_quote_content">
                                                    <blockquote class="card_carousel_item_quote_quote">

                                                        <svg class="icon icon_blockquote">
                                                            <use href="/images/icons.svg#blockquote" />
                                                        </svg>

                                                        <p>We are literally going to change the world.&rdquo;</p>
                                                    </blockquote>
                                                </div>
                                            </div>

                                            <div class="card_carousel_item_quote_grid_item is_media">
                                                <figure class="card_carousel_item_quote_figure">

                                                    <img class="card_carousel_item_image" srcset="https://images.fastspot.com/paul-smiths-college/500x500/1 500w, https://images.fastspot.com/paul-smiths-college/300x300/1 300w, https://images.fastspot.com/paul-smiths-college/100x100/1 100w" sizes="192px" src="https://images.fastspot.com/paul-smiths-college/100x100/1" alt="" loading="lazy" width="100" height="100">

                                                    <figcaption class="card_carousel_item_figcaption">
                                                        <div class="card_carousel_item_quote_name">
                                                            Dr. Kelly L. Cerialot
                                                        </div>

                                                        <div class="card_carousel_item_quote_title">
                                                            Associate Professor
                                                        </div>
                                                    </figcaption>
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide embla_slide--type-topic">
                                    <div class="card_carousel_item_topic">
                                        <div class="card_carousel_item_topic_grid">
                                            <div class="card_carousel_item_topic_grid_item is_media">
                                                <figure class="card_carousel_item_topic_figure">

                                                    <img class="card_carousel_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x980/2 980w, https://images.fastspot.com/paul-smiths-college/740x740/2 740w, https://images.fastspot.com/paul-smiths-college/500x500/2 500w, https://images.fastspot.com/paul-smiths-college/300x300/2 300w, https://images.fastspot.com/paul-smiths-college/100x100/2 100w" sizes="(min-width: 980px) 466px, (min-width: 740px) 350px, 95vw" src="https://images.fastspot.com/paul-smiths-college/100x100/2" alt="" loading="lazy" width="100" height="100">
                                                </figure>
                                            </div>

                                            <div class="card_carousel_item_topic_grid_item is_content">
                                                <div class="card_carousel_item_topic_content">
                                                    <h3 class="card_carousel_item_topic_title">
                                                        <a href="#" class="card_carousel_item_topic_link">
                                                            Inclusion
                                                        </a>
                                                    </h3>

                                                    <div class="card_carousel_item_topic_desc">
                                                        <p>We see unity in diversity and prioritize each other's well-being. At Paul Smith's no one is left out.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide embla_slide--type-quote">
                                    <div class="card_carousel_item_quote">
                                        <div class="card_carousel_item_quote_grid">
                                            <div class="card_carousel_item_quote_grid_item is_content">
                                                <div class="card_carousel_item_quote_content">
                                                    <blockquote class="card_carousel_item_quote_quote">

                                                        <svg class="icon icon_blockquote">
                                                            <use href="/images/icons.svg#blockquote" />
                                                        </svg>

                                                        <p>Community is so important here. We're a very small community. You really get to know students and the students really get to know the faculty and staff.&rdquo;</p>
                                                    </blockquote>
                                                </div>
                                            </div>

                                            <div class="card_carousel_item_quote_grid_item is_media">
                                                <figure class="card_carousel_item_quote_figure">

                                                    <figcaption class="card_carousel_item_figcaption">
                                                        <div class="card_carousel_item_quote_name">
                                                            John Smithfield '26
                                                        </div>

                                                        <div class="card_carousel_item_quote_title">
                                                            Natural Resource Conservation and Management
                                                        </div>
                                                    </figcaption>
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide embla_slide--type-topic">
                                    <div class="card_carousel_item_topic">
                                        <div class="card_carousel_item_topic_grid">
                                            <div class="card_carousel_item_topic_grid_item is_media">
                                                <figure class="card_carousel_item_topic_figure">

                                                    <img class="card_carousel_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x980/3 980w, https://images.fastspot.com/paul-smiths-college/740x740/3 740w, https://images.fastspot.com/paul-smiths-college/500x500/3 500w, https://images.fastspot.com/paul-smiths-college/300x300/3 300w, https://images.fastspot.com/paul-smiths-college/100x100/3 100w" sizes="(min-width: 980px) 466px, (min-width: 740px) 350px, 95vw" src="https://images.fastspot.com/paul-smiths-college/100x100/3" alt="" loading="lazy" width="100" height="100">
                                                </figure>
                                            </div>

                                            <div class="card_carousel_item_topic_grid_item is_content">
                                                <div class="card_carousel_item_topic_content">
                                                    <h3 class="card_carousel_item_topic_title">
                                                        Well-being
                                                    </h3>

                                                    <div class="card_carousel_item_topic_desc">
                                                        <p>We emphasize our students’ mental wellbeing, physical activity, and health—aided and abetted by a close connection to nature.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide embla_slide--type-topic">
                                    <div class="card_carousel_item_topic">
                                        <div class="card_carousel_item_topic_grid">
                                            <div class="card_carousel_item_topic_grid_item is_media">
                                                <figure class="card_carousel_item_topic_figure">

                                                    <img class="card_carousel_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x980/4 980w, https://images.fastspot.com/paul-smiths-college/740x740/4 740w, https://images.fastspot.com/paul-smiths-college/500x500/4 500w, https://images.fastspot.com/paul-smiths-college/300x300/4 300w, https://images.fastspot.com/paul-smiths-college/100x100/4 100w" sizes="(min-width: 980px) 466px, (min-width: 740px) 350px, 95vw" src="https://images.fastspot.com/paul-smiths-college/100x100/4" alt="" loading="lazy" width="100" height="100">
                                                </figure>
                                            </div>

                                            <div class="card_carousel_item_topic_grid_item is_content">
                                                <div class="card_carousel_item_topic_content">
                                                    <h3 class="card_carousel_item_topic_title">
                                                        Adventure
                                                    </h3>

                                                    <div class="card_carousel_item_topic_desc">
                                                        <p>Smittys share an adventurous spirit. In their academics, their hobbies, and their careers, our students and alumni break conventions to take the path less traveled.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="embla__controls" aria-controls="card-carousel-viewport-4">
                            <button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide">

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

                            </button>

                            <div class="embla__dots" data-js="dots" role="navigation"></div>

                            <button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">

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

                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% set component_spacing = 'padding' %}

{% if theme == 'white' %}
	{% set component_spacing = 'margin' %}
{% endif %}


{% set carousel_json = {
	loop: false,
	slidesToScroll: 1,
	breakpoints: {
		'(min-width: 740px)': {
			slidesToScroll: 2
		},
		'(min-width: 980px)': {
			slidesToScroll: 3
		}
	}
}|json_encode %}

{% set uuid_viewport = uniqid("card-carousel-viewport") %}

<div class="card_carousel component_theme_{{ theme }} component_spacing_{{ component_spacing }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="card_carousel_inner">
				<header class="card_carousel_header">
					<div class="card_carousel_header_grid">
						<div class="card_carousel_header_grid_item is_left">
							<div class="card_carousel_header_label">
								{{ group_label }}
							</div>

							<h1 class="card_carousel_header_title">
								{{ group_title }}
							</h1>
						</div>

						{% if group_description %}
							<div class="card_carousel_header_grid_item is_right">
								<div class="card_carousel_header_desc">
									<p>{{ group_description }}</p>
								</div>
							</div>
						{% endif %}
					</div>
				</header>

				<div class="card_carousel_body">
					<div
						class="embla embla__default-controls js-carousel-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 %}
									<li class="embla__slide embla_slide--type-{{ item.type }}">
										{% include "@partial-card-carousel-item--" ~ item.type with {
											item: item
										} %}
									</li>
								{% endfor %}
							</ul>
						</div>

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

							<div class="embla__dots" data-js="dots" role="navigation"></div>

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

No notes defined.