<div class="image-gallery">
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="Image One">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-1>
<span class="visible-for-screen-readers">Image One</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-1>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/IMG-Campus-Location-Large-Image.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
<a href="https://iastate.edu" class="iastate22-button iastate22-button--reverse">Extra Link
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</a>
<a href="https://iastate.edu" class="iastate22-button iastate22-button--reverse">Link Two
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-1" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-1-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-1-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/IMG-Campus-Location-Large-Image.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-1-title">Optional Title Image One</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/IMG-Campus-Location-Small-Image-2.jpg" alt="Image Two">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-2>
<span class="visible-for-screen-readers">Image Two</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-2>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/IMG-Campus-Location-Small-Image-2.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-2" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-2-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-2-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/IMG-Campus-Location-Small-Image-2.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/IMG-Campus-Location-Small-Image-2.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-2-title">Optional Title Image Two</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/IMG_Inline_Left_FPO.jpg" alt="Image Three">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-3>
<span class="visible-for-screen-readers">Image Three</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-3>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/IMG_Inline_Left_FPO.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-3" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-3-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-3-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/IMG_Inline_Left_FPO.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/IMG_Inline_Left_FPO.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-3-title">Optional Title Image Three</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/carousel-slide_fpo.jpg" alt="Image Four">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-4>
<span class="visible-for-screen-readers">Image Four</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-4>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/carousel-slide_fpo.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-4" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-4-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-4-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/carousel-slide_fpo.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/carousel-slide_fpo.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-4-title">Optional Title Image Four</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/Component-Card-Image-1.jpg" alt="Image Five">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-5>
<span class="visible-for-screen-readers">Image Five</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-5>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/Component-Card-Image-1.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-5" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-5-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-5-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/Component-Card-Image-1.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-5-title">Optional Title Image Five</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/Component-Card-Image-3.jpg" alt="Image Six">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-6>
<span class="visible-for-screen-readers">Image Six</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-6>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/Component-Card-Image-3.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-6" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-6-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-6-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/Component-Card-Image-3.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/Component-Card-Image-3.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-6-title">Optional Title Image Six</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/Component-Card-Image-2.jpg" alt="Image Seven">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-7>
<span class="visible-for-screen-readers">Image Seven</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-7>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/Component-Card-Image-2.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-7" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-7-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-7-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/Component-Card-Image-2.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/Component-Card-Image-2.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-7-title">Optional Title Image Seven</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/Component-Feature-Image-Small.jpg" alt="Image 8">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-8>
<span class="visible-for-screen-readers">Image 8</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-8>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/Component-Feature-Image-Small.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-8" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-8-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-8-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/Component-Feature-Image-Small.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/Component-Feature-Image-Small.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-8-title">Optional Title Image Eight</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/Heroes-Kitchen_Sink.jpg" alt="Image Nine">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-9>
<span class="visible-for-screen-readers">Image Nine</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-9>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/Heroes-Kitchen_Sink.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-9" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-9-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-9-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/Heroes-Kitchen_Sink.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/Heroes-Kitchen_Sink.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-9-title">Optional Title Image Nine</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/IMG-Inline_Center_FPO.jpg" alt="Image Ten">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-10>
<span class="visible-for-screen-readers">Image Ten</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-10>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/IMG-Inline_Center_FPO.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-10" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-10-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-10-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/IMG-Inline_Center_FPO.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-10-title">Optional Title Image Ten</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/HP_Finding_Solutions_Story_1_FPO.jpg" alt="Image Eleven">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-11>
<span class="visible-for-screen-readers">Image Eleven</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-11>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/HP_Finding_Solutions_Story_1_FPO.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-11" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-11-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-11-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/HP_Finding_Solutions_Story_1_FPO.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/HP_Finding_Solutions_Story_1_FPO.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-11-title">Optional Title Image Eleven</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="../../img/ecosystem-hero-atmospheric_fpo.jpg" alt="Image Twelve">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger=modal-image-gallery-12>
<span class="visible-for-screen-readers">Image Twelve</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=modal-image-gallery-12>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="../../img/ecosystem-hero-atmospheric_fpo.jpg" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="iastate22-modal iastate22-modal--image-download" id="modal-image-gallery-12" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-image-gallery-12-content" role="dialog" aria-modal="true" aria-labelledby="modal-image-gallery-12-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
<i class="fa-light fa-xmark" aria-hidden="true"></i>
</button>
<figure>
<div class="iastate22-modal__media">
<img src="../../img/ecosystem-hero-atmospheric_fpo.jpg" alt="" loading="lazy" width="400" height="400">
<a href="../../img/ecosystem-hero-atmospheric_fpo.jpg" class="iastate22-button iastate22-button--reverse" download>
<span class="text">Download</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
</div>
<figcaption class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="modal-image-gallery-12-title">Optional Title Image Twelve</h2>
<p>Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</article>
</div>
<div class="image-gallery">
{% for image in images %}
<article class="image-gallery__item">
<div class="image-gallery__item-wrap">
<div class="image-gallery__image-wrap">
<img src="{{ image.src }}" alt="{{ image.alt }}">
<button class="image-gallery__image-contact" tabindex="-1" data-micromodal-trigger={{ image.modal.id }}>
<span class="visible-for-screen-readers">{{ image.alt }}</span>
</button>
</div>
<div class="image-gallery__console">
<span class="icon">
<svg id="SVG_icon_plus" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 14 14">
<path id="Divider_H2" d="M-14180.482-8025.184h14" transform="translate(14180.482 8032.184)" fill="none" stroke="#f1be48" stroke-width="2"/>
<path id="Divider_H2-2" data-name="Divider_H2" d="M0,0H14" transform="translate(7 0) rotate(90)" fill="none" stroke="#f1be48" stroke-width="2"/>
</svg>
</span>
<div class="image-gallery__console-wrap">
<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger={{ image.modal.id }}>
View
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</button>
<a href="{{ image.src }}" class="iastate22-button iastate22-button--reverse" download>
Download
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
<g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
<path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
<path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
<line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
</g>
</svg>
</span>
</a>
{% for additional_button in image.additional_buttons %}
<a href="{{ additional_button.url }}" class="iastate22-button iastate22-button--reverse">{{ additional_button.text }}
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="7.551" height="12.273" viewbox="0 0 7.551 12.273">
<path id="Button-Carrot-Burgundy" d="M-13572.751-6721.45l5.43,5.429-5.43,5.43" transform="translate(13573.458 6722.157)" fill="none" stroke="#7c2529" stroke-width="2"/>
</svg>
</span>
</a>
{% endfor %}
</div>
</div>
</div>
{% include "@modal--image-download" with image.modal %}
</article>
{% endfor %}
</div>
{
"images": [
{
"src": "../../img/IMG-Campus-Location-Large-Image.jpg",
"alt": "Image One",
"additional_buttons": [
{
"url": "https://iastate.edu",
"text": "Extra Link"
},
{
"url": "https://iastate.edu",
"text": "Link Two"
}
],
"modal": {
"id": "modal-image-gallery-1",
"image": "../../img/IMG-Campus-Location-Large-Image.jpg",
"title": "Optional Title Image One",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/IMG-Campus-Location-Small-Image-2.jpg",
"alt": "Image Two",
"modal": {
"id": "modal-image-gallery-2",
"image": "../../img/IMG-Campus-Location-Small-Image-2.jpg",
"title": "Optional Title Image Two",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/IMG_Inline_Left_FPO.jpg",
"alt": "Image Three",
"modal": {
"id": "modal-image-gallery-3",
"image": "../../img/IMG_Inline_Left_FPO.jpg",
"title": "Optional Title Image Three",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/carousel-slide_fpo.jpg",
"alt": "Image Four",
"modal": {
"id": "modal-image-gallery-4",
"image": "../../img/carousel-slide_fpo.jpg",
"title": "Optional Title Image Four",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/Component-Card-Image-1.jpg",
"alt": "Image Five",
"modal": {
"id": "modal-image-gallery-5",
"image": "../../img/Component-Card-Image-1.jpg",
"title": "Optional Title Image Five",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/Component-Card-Image-3.jpg",
"alt": "Image Six",
"modal": {
"id": "modal-image-gallery-6",
"image": "../../img/Component-Card-Image-3.jpg",
"title": "Optional Title Image Six",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/Component-Card-Image-2.jpg",
"alt": "Image Seven",
"modal": {
"id": "modal-image-gallery-7",
"image": "../../img/Component-Card-Image-2.jpg",
"title": "Optional Title Image Seven",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/Component-Feature-Image-Small.jpg",
"alt": "Image 8",
"modal": {
"id": "modal-image-gallery-8",
"image": "../../img/Component-Feature-Image-Small.jpg",
"title": "Optional Title Image Eight",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/Heroes-Kitchen_Sink.jpg",
"alt": "Image Nine",
"modal": {
"id": "modal-image-gallery-9",
"image": "../../img/Heroes-Kitchen_Sink.jpg",
"title": "Optional Title Image Nine",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/IMG-Inline_Center_FPO.jpg",
"alt": "Image Ten",
"modal": {
"id": "modal-image-gallery-10",
"image": "../../img/IMG-Inline_Center_FPO.jpg",
"title": "Optional Title Image Ten",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/HP_Finding_Solutions_Story_1_FPO.jpg",
"alt": "Image Eleven",
"modal": {
"id": "modal-image-gallery-11",
"image": "../../img/HP_Finding_Solutions_Story_1_FPO.jpg",
"title": "Optional Title Image Eleven",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
},
{
"src": "../../img/ecosystem-hero-atmospheric_fpo.jpg",
"alt": "Image Twelve",
"modal": {
"id": "modal-image-gallery-12",
"image": "../../img/ecosystem-hero-atmospheric_fpo.jpg",
"title": "Optional Title Image Twelve",
"content": "Optional caption nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.",
"download": true
}
}
]
}
.image-gallery {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: rem(40);
@include media-breakpoint-up(md) {
grid-gap: rem(14) rem(12);
grid-template-columns: 1fr 1fr;
}
@include media-breakpoint-up(lg) {
grid-template-columns: 1fr 1fr 1fr;
.outer-pad & {
grid-template-columns: 1fr 1fr;
}
}
@include media-breakpoint-up(xl) {
.outer-pad & {
grid-template-columns: 1fr 1fr 1fr;
min-width: rem(1112);
position: relative;
left: calc(50% + 50px);
transform: translateX(-50%);
transition: left 0.15s ease-in-out;
}
}
@include media-breakpoint-up(xxl) {
.outer-pad & {
left: 50%;
}
}
}
.image-gallery__item {
position: relative;
overflow: hidden;
&:before,
&:after {
content: "";
position: absolute;
width: 100%;
height: rem(5);
background: $iastate-gold;
opacity: 0;
left: 0;
transition: opacity 0.3s ease-out;
z-index: 3;
}
// @include media-breakpoint-down(md) {
// &:nth-child(n + 4) {
// display: none;
// }
// }
&:before {
top: 0;
}
&:after {
bottom: 0;
}
&:hover,
&:focus-within {
&:before,
&:after {
opacity: 1;
transition: opacity 0.2s ease-out;
}
.image-gallery__item-wrap {
&:before,
&:after {
opacity: 1;
transition: opacity 0.2s ease-out;
}
}
.image-gallery__image-wrap > img {
transition: transform 0.2s ease-out;
transform: scale(1.1);
}
.image-gallery__console > .icon {
opacity: 0;
transition: opacity 0.2s ease-out;
}
.image-gallery__console {
width: 100%;
grid-template-rows: 1fr;
transition: grid-template-rows 0.2s ease-out, width 0.2s ease-out;
}
.image-gallery__console-wrap {
opacity: 1;
transition: opacity 0.2s 0.3s ease-out;
}
}
}
.image-gallery__item-wrap {
&:before,
&:after {
content: "";
position: absolute;
width: rem(5);
height: 100%;
background: $iastate-gold;
opacity: 0;
top: 0;
transition: opacity 0.3s ease-out;
z-index: 3;
}
&:before {
left: 0;
}
&:after {
right: 0;
}
}
.image-gallery__image-wrap {
position: relative;
aspect-ratio: 1/1;
> img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
transform: scale(1);
transition: transform 0.3s ease-out;
}
}
.image-gallery__image-contact {
position: absolute;
inset: 0;
cursor: pointer;
background-color: transparent;
z-index: 1;
border: none;
}
.image-gallery__console {
background: $iastate-red;
position: absolute;
bottom: 0;
right: 0;
padding: rem(20);
z-index: 2;
width: rem(40);
height: auto;
display: grid;
justify-content: center;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s 0.2s ease-out, width 0.3s 0.2s ease-out;
> .icon {
position: absolute;
bottom: rem(6);
right: rem(12);
opacity: 1;
transition: opacity 0.3s 0.5s ease-out;
}
}
.image-gallery__console-wrap {
position: relative;
width: 100%;
min-width: rem(300);
max-width: rem(300);
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
opacity: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: rem(4) rem(10);
transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out;
@include media-breakpoint-up("sm") {
min-width: rem(320);
max-width: rem(340);
gap: rem(12) rem(28);
}
@include media-breakpoint-up("md") {
gap: rem(5) rem(10);
}
@include media-breakpoint-up("lg") {
gap: rem(12) rem(28);
}
> button,
> a {
position: relative;
z-index: 10;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
> .icon svg path,
.icon svg line {
transition: stroke 0.2s ease-in-out;
}
&:hover,
&:focus {
background: $iastate-red;
border-color: $border-gold;
color: $white;
> .icon svg path,
.icon svg line {
// fill: $iastate-gold;
stroke: $border-gold;
}
}
}
}
.iastate22-modal--image-download {
figure {
margin: 0;
}
}
There are no notes for this item.