<div class="cta__wrapper element--left bg--black">
<div class="cta__container">
<div class="cta__content">
<p class="cta__summary">Iowa blends leadership in the arts with pioneering scientific research, helping students carve their own unique path–wherever it leads.</p>
</div>
<div class="cta__link">
<a href="https://uiowa.edu/" class="bttn bttn--secondary bttn--caps">Request Information
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
.cta__wrapper {
width: 100%; }
.cta__wrapper .bold-headline,
.cta__wrapper .headline {
margin: 0;
padding: 0;
font-size: 2.8rem;
line-height: 1.1; }
.cta__wrapper .bold-headline.headline--uppercase,
.cta__wrapper .headline.headline--uppercase {
font-size: 2.8rem; }
.cta__wrapper[class*="bg--black"] .bold-headline,
.cta__wrapper[class*="bg--black"] .headline {
color: var(--brand-primary); }
.cta__summary {
line-height: 1.5; }
@media (min-width: 84.375em) {
.cta__summary {
margin: 0; } }
.cta__container {
display: block;
padding: 2.5rem 1.25rem;
justify-items: center;
align-items: center;
text-align: center; }
.element--left .cta__container {
justify-items: unset;
align-items: unset;
text-align: unset;
width: 100%; }
@media (min-width: 980px) {
.element--left .cta__container {
padding: 1.875rem 0; } }
@media (min-width: 980px) {
.cta__container {
display: grid;
padding: 1.875rem 3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-column-gap: 0px;
grid-row-gap: 0px; } }
.cta__container > div {
margin: 1.05rem; }
@media (min-width: 84.375em) {
.cta__container > div {
margin: 0 1.05rem; } }
@media (min-width: 84.375em) {
.cta__container > div {
flex: 1; } }
.cta__wrapper.element--left .bold-headline {
font-size: 3.2rem; }
.cta__wrapper.element--left .bold-headline {
margin-bottom: 0.625rem;
font-size: 2.5rem; }
@media (min-width: 980px) {
.cta__container .cta__title {
margin-left: 0; } }
.element--left .cta__container .cta__title {
grid-area: 1 / 1 / 2 / 3; }
@media (min-width: 980px) {
.cta__container .cta__content {
margin-left: 0; } }
.element--left .cta__container .cta__content {
grid-area: 2 / 1 / 3 / 3; }
@media (min-width: 980px) {
.cta__container .cta__link {
margin-left: 0; } }
.element--left .cta__container .cta__link {
grid-area: 1 / 3 / 3 / 4; }
@media (min-width: 980px) {
.element--left .cta__container .cta__link {
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end; } }
@import '../../assets/scss/variables';
@import '../../assets/scss/utilities';
.cta {
&__wrapper {
width: 100%;
.bold-headline,
.headline {
margin: 0;
padding: 0;
font-size: 2.8rem;
line-height: 1.1;
&.headline--uppercase {
font-size: 2.8rem;
}
}
&[class*="bg--black"] {
.bold-headline,
.headline {
color: $primary;
}
}
}
&__summary {
line-height: 1.5;
@include breakpoint(page-container) {
margin: 0;
}
}
&__container {
display: block;
padding: $xlg $mobile-width-gutter;
justify-items: center;
align-items: center;
text-align: center;
.element--left & {
justify-items: unset;
align-items: unset;
text-align: unset;
width: 100%;
@include breakpoint(md) {
padding: $lg 0;
}
}
@include breakpoint(md) {
display: grid;
padding: $lg $desktop-width-gutter;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-column-gap: 0px;
grid-row-gap: 0px;
}
}
}
.cta__container>div {
margin: $md;
@include breakpoint(page-container) {
margin: 0 $md;
}
@include breakpoint(page-container) {
flex: 1;
}
}
.cta__wrapper.element--left .bold-headline {
font-size: 3.2rem;
}
.cta__wrapper.element--left .bold-headline {
margin-bottom: $sm;
font-size: 2.5rem;
}
.cta__container {
.cta__title {
@include breakpoint(md) {
margin-left: 0;
}
.element--left & {
grid-area: 1 / 1 / 2 / 3;
}
}
.cta__content {
@include breakpoint(md) {
margin-left: 0;
}
.element--left & {
grid-area: 2 / 1 / 3 / 3;
}
}
.cta__link {
@include breakpoint(md) {
margin-left: 0;
}
.element--left & {
grid-area: 1 / 3 / 3 / 4;
@include breakpoint(md) {
text-align: right;
@include center(vertical);
justify-content: flex-end;
}
}
}
}