There are no notes for this item.
<div class="grid-panel grid-panel--asymmetrical">
<div class="grid-panel__column-image-left">
<img class="grid-panel__img" src="../../assets/images/viewbook/sections/0315.jpg" alt="Alt Text" />
</div>
<div class="grid-panel__column-content-right grid-panel__content">
<h2 class="headline headline--uppercase">
<span class="headline__text">We Work <span>Together</span></span>
</h2>
<p>The University of Iowa blends big-school opportunities with close, personal support to help you excel. We remove the barriers between arts and science, between students and faculty—but most of all, between you and anything you’d like to explore.</p>
<p>How many universities have both a state-of-the-art children’s hospital and a 3,883-pipe Klais organ? Or helped build the Voyager I satellite and the very first creative writing degree program? Just one: Iowa.</p>
<a href="" class="bttn ">
</a>
</div>
</div>
.grid-panel .grid-panel__img {
align-self: start;
width: 100%; }
.grid-panel.grid-panel--split {
padding-top: 3rem; }
@media (min-width: 84.375em) {
.grid-panel.grid-panel--split {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px; } }
.grid-panel.grid-panel--split .grid-panel__content {
text-align: left;
padding: 0 3rem; }
.grid-panel.grid-panel--asymmetrical {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap; }
@media (min-width: 84.375em) {
.grid-panel.grid-panel--asymmetrical {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px; } }
.grid-panel__column:nth-child(1) {
grid-area: 1 / 1 / 4 / 4; }
.grid-panel__column:nth-child(2) {
grid-area: 1 / 4 / 4 / 7; }
@media (min-width: 84.375em) {
.grid-panel__column:nth-child(2) {
padding: 0 3.5rem 0 3rem; } }
@media (min-width: 84.375em) {
.grid-panel__column.grid-panel__content:nth-child(2) {
padding: 0 3.5rem 0 3rem; } }
.grid-panel__column-image-left {
order: 1;
flex-basis: 100%; }
@media (min-width: 84.375em) {
.grid-panel__column-image-left {
grid-area: 1 / 1 / 4 / 5; } }
.grid-panel__column-content-right {
flex-basis: 100%; }
@media (min-width: 84.375em) {
.grid-panel__column-content-right {
grid-area: 1 / 5 / 4 / 7; } }
.grid-panel__column-image-right {
grid-area: 1 / 3 / 4 / 7;
width: 100%; }
.grid-panel__column-content-left {
grid-area: 1 / 1 / 4 / 3;
align-items: center; }
.grid-panel__column-content-left h2.headline {
font-size: calc(4em + 1vw); }
.grid-panel__content {
padding: 3rem;
text-align: center;
width: 100%; }
@media (min-width: 84.375em) {
.grid-panel__content {
padding: 3rem 3.5rem 0 3rem;
text-align: left; } }
.grid-panel__content h2.headline {
font-size: calc(4em + 1vw); }
@media (max-width: 100.688em) and (min-width: 93.75em) {
.grid-panel--asymmetrical p {
font-size: 1.1rem; }
.grid-panel__content .headline--uppercase {
font-size: calc(3em + .9vw) !important; } }
@media (max-width: 93.75em) and (min-width: 84.375em) {
.grid-panel__content .headline--uppercase {
font-size: calc(3em + .3vw) !important; }
.grid-panel--asymmetrical p {
font-size: 1.1rem; } }
@import '../../../assets/scss/variables';
@import "../../../assets/scss/utilities";
.grid-panel {
.grid-panel__img {
align-self: start;
width: 100%;
}
&.grid-panel--split {
padding-top: 3rem;
@include breakpoint(page-container) {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.grid-panel__content {
text-align: left;
padding: 0 3rem;
}
}
&.grid-panel--asymmetrical {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
@include breakpoint(page-container) {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
}
&__column:nth-child(1) {
grid-area: 1 / 1 / 4 / 4;
}
&__column:nth-child(2) {
grid-area: 1 / 4 / 4 / 7;
@include breakpoint(page-container) {
padding: 0 3.5rem 0 3rem;
}
}
&__column.grid-panel__content:nth-child(2) {
@include breakpoint(page-container) {
padding: 0 3.5rem 0 3rem;
}
}
&__column-image-left {
order: 1;
flex-basis: 100%;
@include breakpoint(page-container) {
grid-area: 1 / 1 / 4 / 5;
}
}
&__column-content-right {
flex-basis: 100%;
@include breakpoint(page-container) {
grid-area: 1 / 5 / 4 / 7;
}
}
&__column-image-right {
grid-area: 1 / 3 / 4 / 7;
width: 100%;
}
&__column-content-left {
grid-area: 1 / 1 / 4 / 3;
align-items: center;
h2.headline {
font-size: calc(4em + 1vw)
}
}
}
// styles for content within grid panel
.grid-panel__content {
padding: 3rem;
text-align: center;
width: 100%;
@include breakpoint(page-container) {
padding: 3rem 3.5rem 0 3rem;
text-align: left;
}
h2.headline {
font-size: calc(4em + 1vw);
}
}
// size adjustment to prevent container overflow before breakpoint
@media (max-width:100.688em) and (min-width:93.750em) {
.grid-panel--asymmetrical p {
font-size: 1.1rem;
}
.grid-panel__content .headline--uppercase {
font-size: calc(3em + .9vw) !important;
}
}
@media (max-width:93.750em) and (min-width:84.375em) {
.grid-panel__content .headline--uppercase {
font-size: calc(3em + .3vw) !important;
}
.grid-panel--asymmetrical p {
font-size: 1.1rem;
}
}