<!-- Event Feature -->
<div class="event_feature component_theme_white component_spacing_margin">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-all-justify-center">
            <div class="event_feature_inner">
                <div class="event_feature_item">
                    <figure class="event_feature_item_figure">
                        <a class="event_feature_item_figure_link" href="#" aria-label="Read more about 3rd Annual Salamander Crossing Festival" tabindex="-1">

                            <img class="event_feature_item_image" srcset="https://images.fastspot.com/paul-smiths-college/1220x686/4 1220w, https://images.fastspot.com/paul-smiths-college/980x552/4 980w, https://images.fastspot.com/paul-smiths-college/740x416/4 740w, https://images.fastspot.com/paul-smiths-college/500x282/4 500w, https://images.fastspot.com/paul-smiths-college/300x169/4 300w" sizes="(min-width: 1440px) 562px, (min-width: 1220px) 482px, (min-width: 980px) 385px, (min-width: 740px) 470px, 98vw" src="https://images.fastspot.com/paul-smiths-college/300x169/4" alt="" loading="lazy" width="300" height="169">
                        </a>
                    </figure>
                    <div class="event_feature_item_wrapper">
                        <div class="event_feature_item_header">
                            <h2 class="event_feature_item_title">

                                <a href="#" class="event_feature_item_title_link">
                                    <span class="event_feature_item_title_link_inner">
                                        <span class="event_feature_item_title_link_label">3rd Annual Salamander Crossing Festival</span><span class="icon_nowrap event_feature_item_title_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_chevron_right">
                                                <use href="/images/icons.svg#chevron_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </h2>
                            <div class="event_feature_item_categories">
                                <div class="event_feature_item_category_hint">Categories</div>
                                <ul class="event_feature_item_category_list" aria-label="Categories">
                                    <li class="event_feature_item_category">Campus Tradition</li>
                                </ul>
                            </div>
                        </div>
                        <div class="event_feature_item_body">
                            <div class="event_feature_item_details">
                                <time class="event_feature_item_detail" datetime="2024-04-07 10:00:00">
                                    <span class="event_feature_item_detail_icon">
                                        <svg class="icon icon_calendar">
                                            <use href="/images/icons.svg#calendar" />
                                        </svg>
                                    </span>
                                    <span class="event_feature_item_detail_hint">Day:&nbsp;</span>
                                    <span class="event_feature_item_detail_label">
                                        <span class="event_feature_item_time_start">Apr 07</span>
                                        <span class="event_feature_item_time_end"> - Apr 08</span>
                                    </span>
                                </time>
                                <div class="event_feature_item_detail">
                                    <span class="event_feature_item_detail_icon">
                                        <svg class="icon icon_clock">
                                            <use href="/images/icons.svg#clock" />
                                        </svg>
                                    </span>
                                    <span class="event_feature_item_detail_hint">Time:&nbsp;</span>
                                    <span class="event_feature_item_detail_label">10:00 AM - 2:00 PM</span>
                                </div>
                            </div>
                            <div class="event_feature_item_description">
                                <p>How does the salamander cross the road? With the help of Paul Smith's College students of course! Join members of our Wildlife Society chapter to witness native spotted salamanders commute to their spring breeding pools.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Event Feature -->
{#
	{% include '@partial-event-feature' with {
		item: {
			theme: 'theme',
			image: '1',
			date: {
				same_day: true,
				all_day: false,
				from: '2023-05-31 17:00:00',
				to: '2023-05-31 19:00:00'
			},
			title: 'Title',
			url: '#',
			description: 'Description',
			categories: [
				'Category'
			]
		}
	} %}
#}

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

<!-- Event Feature -->
<div class="event_feature component_theme_{{ theme }} component_spacing_{{ component_spacing }}">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-all-justify-center">
			<div class="event_feature_inner">
				<div class="event_feature_item">
					<figure class="event_feature_item_figure">
						<a class="event_feature_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
							{% include '@partial-image' with {
								class: 'event_feature_item',
								alt: '',
								image: item.image,
								loading: 'lazy',
								sources: [
									img.wide.lrg,
									img.wide.med,
									img.wide.sml,
									img.wide.xsml,
									img.wide.xxsml
								],
								sizes: [
									"(min-width: 1440px) 562px",
									"(min-width: 1220px) 482px",
									"(min-width: 980px) 385px",
									"(min-width: 740px) 470px",
									"98vw"
								]
							} %}
						</a>
					</figure>
					<div class="event_feature_item_wrapper">
						<div class="event_feature_item_header">
							<h2 class="event_feature_item_title">
								{% include '@partial-link' with {
									class: 'event_feature_item_title',
									title: item.title,
									url: item.url,
									icon: 'chevron_right',
									nowrap: true
								} %}
							</h2>
							<div class="event_feature_item_categories">
								<div class="event_feature_item_category_hint">Categories</div>
								<ul class="event_feature_item_category_list" aria-label="Categories">
									{% for category in item.categories %}
										<li class="event_feature_item_category">{{ category }}</li>
									{% endfor %}
								</ul>
							</div>
						</div>
						<div class="event_feature_item_body">
							<div class="event_feature_item_details">
								<time class="event_feature_item_detail" datetime="{{ item.date.from }}">
									<span class="event_feature_item_detail_icon">{{ icon('calendar') }}</span>
									<span class="event_feature_item_detail_hint">Day:&nbsp;</span>
									<span class="event_feature_item_detail_label">
										<span class="event_feature_item_time_start">{{ item.date.from|date('M d') }}</span>
										{% if item.date.same_day == false %}
											<span class="event_feature_item_time_end"> - {{ item.date.to|date('M d') }}</span>
										{% endif %}
									</span>
								</time>
								<div class="event_feature_item_detail">
									<span class="event_feature_item_detail_icon">{{ icon('clock') }}</span>
									<span class="event_feature_item_detail_hint">Time:&nbsp;</span>
									<span class="event_feature_item_detail_label">{{ item.date.from|date('g:i A') }} - {{ item.date.to|date('g:i A') }}</span>
								</div>
							</div>
							<div class="event_feature_item_description">
								<p>{{ item.description }}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Event Feature -->

No notes defined.