<div class="timeline_item">
    <div class="timeline_item_primary">
        <h3 class="timeline_item_title"><span class="timeline_item_title_year"> - </span></h3>
        <p class="timeline_item_description"></p>
    </div>
    <div class="timeline_item_secondary">
        <div class="timeline_item_media">
            <p class="timeline_item_year" aria-hidden="true"></p>
            <figure class="timeline_item_figure">

                <img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/ 980w, https://images.fastspot.com/paul-smiths-college/740x494/ 740w, https://images.fastspot.com/paul-smiths-college/500x334/ 500w, https://images.fastspot.com/paul-smiths-college/300x200/ 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/" alt="" loading="lazy" width="300" height="200">
            </figure>
            <button class="js-swap js-timeline-button js-timeline-button- timeline_item_button" data-swap-target=".timeline_modal_item_" data-swap-linked="toggle_linked_" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
                <span class="timeline_item_button_label">Enlarge image</span>
                <span class="timeline_item_button_icon">
                    <svg class="icon icon_plus">
                        <use href="/images/icons.svg#plus" />
                    </svg>
                </span>
            </button>
        </div>
    </div>
</div>
<div class="timeline_item">
	<div class="timeline_item_primary">
		<h3 class="timeline_item_title"><span class="timeline_item_title_year">{{ item.year }} - </span>{{ item.title }}</h3>
		<p class="timeline_item_description">{{ item.description }}</p>
	</div>
	<div class="timeline_item_secondary">
		<div class="timeline_item_media">
			<p class="timeline_item_year" aria-hidden="true">{{ item.year }}</p>
			<figure class="timeline_item_figure">
				{% include '@partial-image' with {
					class: 'timeline_item',
					alt: item.alt,
					image: item.image,
					loading: 'lazy',
					sources: [
						img.classic.med,
						img.classic.sml,
						img.classic.xsml,
						img.classic.xxsml
					],
					sizes: [
						"(min-width: 1440px) 720px",
						"(min-width: 1220px) 610px",
						"(min-width: 980px) 486px",
						"(min-width: 740px) 710px",
						"75vw"
					]
				} %}
			</figure>
			<button class="js-swap js-timeline-button js-timeline-button-{{ loop.index }} timeline_item_button" data-swap-target=".timeline_modal_item_{{ loop.index }}" data-swap-linked="toggle_linked_{{ loop.index }}" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
				<span class="timeline_item_button_label">Enlarge {{ item.title }} image</span>
				<span class="timeline_item_button_icon">{{ icon('plus') }}</span>
			</button>
		</div>
	</div>
</div>

No notes defined.