<div class="homepage-tiles homepage-tiles--arch">
<div class="homepage-tiles__container">
<div class="homepage-tiles__wide-layout">
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--3-col">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/340?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Discover architectural education<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/432/480?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >Urbanism</span>
</a>
</div>
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Work
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/258?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Multi Family Housing Complex<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">Bernado Gonzalez</div>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/880/496?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >Detail + fabrication</span>
</a>
</div>
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
News
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/400/608?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Professor Lynne M. Dearborn Announced as 2020-2021 ASCA President<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--3-col">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/432/560?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >Health + well-being</span>
</a>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/352?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Browse offered courses<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Students
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/432?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Sharanya Reddy<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">Master of Architecture</div>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col">
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Faculty
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/400/480?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Marci S. Uihlein, P.E.<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">Professor</div>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/880/752?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >Building performance</span>
</a>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--3-col">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/352?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Experience design studio<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Alumni
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/496?random=1" alt="">
<span class="homepage-tiles__link-area-text">
John Marx, AIA<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">Co-Founding Principal and Chief Creative Officer B.S. in Architectural Studies 1980
</div>
</div>
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Events
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/400?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Plym Traveling Fellows Lectures<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">October 5, 2020</div>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/880/576?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >History + theory</span>
</a>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/400/596?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Explore our spaces<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
<div class="homepage-tiles__small-layout">
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/340?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Discover architectural education<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/432/480?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >Urbanism</span>
</a>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Work
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/258?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Multi Family Housing Complex<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">Bernado Gonzalez</div>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/880/496?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >Detail + fabrication</span>
</a>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
News
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/400/608?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Professor Lynne M. Dearborn Announced as 2020-2021 ASCA President<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/432/560?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >Health + well-being</span>
</a>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/352?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Browse offered courses<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Students
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/432?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Sharanya Reddy<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">Master of Architecture</div>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Faculty
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/400/480?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Marci S. Uihlein, P.E.<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">Professor</div>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/880/752?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >Building performance</span>
</a>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/352?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Experience design studio<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Alumni
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/496?random=1" alt="">
<span class="homepage-tiles__link-area-text">
John Marx, AIA<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">Co-Founding Principal and Chief Creative Officer B.S. in Architectural Studies 1980
</div>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
<div class="homepage-tiles__tile">
<div class="homepage-tiles__label">
Events
</div>
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/432/400?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Plym Traveling Fellows Lectures<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
<div class="homepage-tiles__details">October 5, 2020</div>
</div>
<div class="homepage-tiles__tile">
<a class="homepage-tiles__program-area-container" href="#">
<span class="homepage-tiles__program-image-container">
<img class="homepage-tiles__program-image" src="https://picsum.photos/880/576?random=1" alt="">
</span>
<span class="homepage-tiles__focus-text">Focus on</span>
<span class="homepage-tiles__program-area" >History + theory</span>
</a>
</div>
</div>
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
<div class="homepage-tiles__tile">
<a class="homepage-tiles__link-area" href="#">
<img class="homepage-tiles__image" src="https://picsum.photos/400/596?random=1" alt="">
<span class="homepage-tiles__link-area-text">
Explore our spaces<span class="homepage-tiles__link-area-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
<div class="homepage-tiles__footer-rule"></div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
{% set isGrouped = false %}
<div class="homepage-tiles homepage-tiles--{{ siteUnit }}">
<div class="homepage-tiles__container">
<div class="homepage-tiles__wide-layout">
{% for tileGroups in main.wideTileLayout %}
<div class="homepage-tiles__tile-group {{ tileGroups|length == 3 ? 'homepage-tiles__tile-group--3-col' : 'homepage-tiles__tile-group--2-col' }}">
{% for tile in tileGroups %}
{% include 'partials/homepages/arch/homepage-tile/homepage-tile.twig' with {tile: tile} %}
{% endfor %}
</div>
{% endfor %}
</div>
<div class="homepage-tiles__small-layout">
{% for tileGroups in main.smallTileLayout %}
<div class="homepage-tiles__tile-group homepage-tiles__tile-group--2-col homepage-tiles__tile-group--half">
{% for tile in tileGroups %}
{% include 'partials/homepages/arch/homepage-tile/homepage-tile.twig' with {tile: tile} %}
{% endfor %}
</div>
{% endfor %}
</div>
<div class="homepage-tiles__footer-rule"></div>
</div>
</div>
{
"siteUnit": "arch",
"departmentName": "School of Architecture",
"background": "light",
"main": {
"wideTileLayout": [
[
{
"type": "page_link_data",
"text": "Discover architectural education",
"image": {
"src": "https://picsum.photos/432/340?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "program_area_data",
"text": "Urbanism",
"image": {
"src": "https://picsum.photos/432/480?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "featured_post_data",
"text": "Multi Family Housing Complex",
"image": {
"src": "https://picsum.photos/432/258?random=1",
"alt": ""
},
"link": "#",
"label": "Work",
"details": "Bernado Gonzalez"
}
],
[
{
"type": "program_area_data",
"text": "Detail + fabrication",
"image": {
"src": "https://picsum.photos/880/496?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "featured_post_data",
"text": "Professor Lynne M. Dearborn Announced as 2020-2021 ASCA President",
"image": {
"src": "https://picsum.photos/400/608?random=1",
"alt": ""
},
"link": "#",
"label": "News"
}
],
[
{
"type": "program_area_data",
"text": "Health + well-being",
"image": {
"src": "https://picsum.photos/432/560?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "page_link_data",
"text": "Browse offered courses",
"image": {
"src": "https://picsum.photos/432/352?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "featured_post_data",
"text": "Sharanya Reddy",
"image": {
"src": "https://picsum.photos/432/432?random=1",
"alt": ""
},
"link": "#",
"label": "Students",
"details": "Master of Architecture"
}
],
[
{
"type": "featured_post_data",
"text": "Marci S. Uihlein, P.E.",
"image": {
"src": "https://picsum.photos/400/480?random=1",
"alt": ""
},
"link": "#",
"label": "Faculty",
"details": "Professor"
},
{
"type": "program_area_data",
"text": "Building performance",
"image": {
"src": "https://picsum.photos/880/752?random=1",
"alt": ""
},
"link": "#"
}
],
[
{
"type": "page_link_data",
"text": "Experience design studio",
"image": {
"src": "https://picsum.photos/432/352?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "featured_post_data",
"text": "John Marx, AIA",
"image": {
"src": "https://picsum.photos/432/496?random=1",
"alt": ""
},
"link": "#",
"label": "Alumni",
"details": "Co-Founding Principal and Chief Creative Officer
B.S. in Architectural Studies
1980"
},
{
"type": "featured_post_data",
"text": "Plym Traveling Fellows Lectures",
"image": {
"src": "https://picsum.photos/432/400?random=1",
"alt": ""
},
"link": "#",
"label": "Events",
"details": "October 5, 2020"
}
],
[
{
"type": "program_area_data",
"text": "History + theory",
"image": {
"src": "https://picsum.photos/880/576?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "page_link_data",
"text": "Explore our spaces",
"image": {
"src": "https://picsum.photos/400/596?random=1",
"alt": ""
},
"link": "#"
}
]
],
"smallTileLayout": [
[
{
"type": "page_link_data",
"text": "Discover architectural education",
"image": {
"src": "https://picsum.photos/432/340?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "program_area_data",
"text": "Urbanism",
"image": {
"src": "https://picsum.photos/432/480?random=1",
"alt": ""
},
"link": "#"
}
],
[
{
"type": "featured_post_data",
"text": "Multi Family Housing Complex",
"image": {
"src": "https://picsum.photos/432/258?random=1",
"alt": ""
},
"link": "#",
"label": "Work",
"details": "Bernado Gonzalez"
},
{
"type": "program_area_data",
"text": "Detail + fabrication",
"image": {
"src": "https://picsum.photos/880/496?random=1",
"alt": ""
},
"link": "#"
}
],
[
{
"type": "featured_post_data",
"text": "Professor Lynne M. Dearborn Announced as 2020-2021 ASCA President",
"image": {
"src": "https://picsum.photos/400/608?random=1",
"alt": ""
},
"link": "#",
"label": "News"
},
{
"type": "program_area_data",
"text": "Health + well-being",
"image": {
"src": "https://picsum.photos/432/560?random=1",
"alt": ""
},
"link": "#"
}
],
[
{
"type": "page_link_data",
"text": "Browse offered courses",
"image": {
"src": "https://picsum.photos/432/352?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "featured_post_data",
"text": "Sharanya Reddy",
"image": {
"src": "https://picsum.photos/432/432?random=1",
"alt": ""
},
"link": "#",
"label": "Students",
"details": "Master of Architecture"
}
],
[
{
"type": "featured_post_data",
"text": "Marci S. Uihlein, P.E.",
"image": {
"src": "https://picsum.photos/400/480?random=1",
"alt": ""
},
"link": "#",
"label": "Faculty",
"details": "Professor"
},
{
"type": "program_area_data",
"text": "Building performance",
"image": {
"src": "https://picsum.photos/880/752?random=1",
"alt": ""
},
"link": "#"
}
],
[
{
"type": "page_link_data",
"text": "Experience design studio",
"image": {
"src": "https://picsum.photos/432/352?random=1",
"alt": ""
},
"link": "#"
},
{
"type": "featured_post_data",
"text": "John Marx, AIA",
"image": {
"src": "https://picsum.photos/432/496?random=1",
"alt": ""
},
"link": "#",
"label": "Alumni",
"details": "Co-Founding Principal and Chief Creative Officer
B.S. in Architectural Studies
1980"
}
],
[
{
"type": "featured_post_data",
"text": "Plym Traveling Fellows Lectures",
"image": {
"src": "https://picsum.photos/432/400?random=1",
"alt": ""
},
"link": "#",
"label": "Events",
"details": "October 5, 2020"
},
{
"type": "program_area_data",
"text": "History + theory",
"image": {
"src": "https://picsum.photos/880/576?random=1",
"alt": ""
},
"link": "#"
}
],
[
{
"type": "page_link_data",
"text": "Explore our spaces",
"image": {
"src": "https://picsum.photos/400/596?random=1",
"alt": ""
},
"link": "#"
}
]
]
}
}
.homepage-tiles
breakpointLarge = 960px
breakpointSmall = 532px
background-color white
&__container
@extends $contentContainer
&__tile-group
display grid
justify-content center
align-items center
+above(breakpointSmall)
grid-gap 48px
&:not(first-child)
margin-top 80px
&__tile-group--3-col
width calc(100% - 48px)
margin 0 auto
grid-template-columns 100%
+above(breakpointSmall)
grid-template-columns 50% 50%
+above(breakpointLarge)
grid-template-columns 33.33% 33.33% 33.33%
&__tile-group--2-col:nth-child(4n)
grid-template-columns 100%
+above(breakpointSmall)
grid-template-columns 33.33% 66.66%
&__tile-group--2-col
grid-template-columns 100%
+above(breakpointSmall)
grid-template-columns 66.66% 33.33%
&__tile-group--half
&__tile-group--half:nth-child(4n)
grid-template-columns 100% !important
+above(breakpointSmall)
grid-template-columns 50% 50% !important
&__tile
width fit-content
+below(breakpointLarge - 1)
margin-top 32px
margin-bottom 32px
&__wide-layout
display none
+above(breakpointLarge)
display block
&__small-layout
+above(breakpointLarge)
display none
&__program-area-container
display flex
flex-direction column
text-decoration none
&:hover
&:focus
& .homepage-tiles__program-image-container:after
border-color industrialBlue
top 0
right 0
& .homepage-tiles__program-area
color industrialBlue
& .homepage-tiles__program-image
filter grayscale(0)
&__program-area
@extends $billboardSmallTitle
text-transform uppercase
transition color 300ms ease-in-out
letter-spacing 8px
position relative
&__focus-text
@extends $headline4
color industrialBlue
margin-top 16px
+above(breakpointLarge)
margin-top 24px
&__program-image-container
position relative
&:after
transition all 300ms ease-in-out
content ''
position absolute
height 100%
width 100%
border 4px solid charcoalLight
top -8px
right -8px
+above(breakpointSmall)
top -16px
right -16px
&__image
&:hover
&:focus
filter grayscale(0)
&__image
&__program-image
transition all 300ms ease-in-out
filter grayscale(1)
&__label
@extends $headline4
display inline-block
padding-top 8px
margin-bottom 16px
border-top solid charcoalLight 4px
&__link-area
text-decoration none
&:hover
&:focus
& .homepage-tiles__image
filter grayscale(0)
& .homepage-tiles__link-area-text
color industrialBlue
& .homepage-tiles__link-area-icon svg
transform translate(4px, 0)
&__link-area-text
@extends $secondaryLead
color charcoalLight
display block
font-weight 700
margin-top 16px
transition color 0.3s
+above(breakpointLarge)
margin-top 24px
&__link-area-icon
display inline
white-space nowrap
& svg
transition all 0.3s
& .right-chevron__shape
fill industrialBlue
&__details
@extends $detail
&__footer-rule
border-bottom solid 4px charcoalLight
position relative
margin-top 48px
margin-bottom 80px
+above(breakpointSmall)
margin-top 128px
margin-bottom 128px
+above(breakpointLarge)
margin-top 160px
margin-bottom 160px
&:before
content ''
position absolute
top 0
right 0
width 100vw
border-bottom solid 4px charcoalLight
There are no notes for this item.