.callout-banner {
background-color: #E6E4DE; }
.callout-banner--has-image {
background-color: #000000; }
.callout-banner__boundary {
position: relative; }
.callout-banner--has-image .callout-banner__boundary {
display: flex;
width: 200vw; }
@media (min-width: 900px) {
.callout-banner--has-image .callout-banner__boundary {
max-height: 40.625rem; } }
.callout-banner__content {
min-height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2.8125rem 1.25rem 1.25rem 1.25rem; }
@media (min-width: 768px) {
.callout-banner__content {
padding: 3rem 4.5rem; } }
.callout-banner--has-image .callout-banner__content {
transform: translateX(-100%);
width: 100vw; }
@media (min-width: 768px) {
.callout-banner--has-image .callout-banner__content {
padding: 2rem 4.5rem; } }
.callout-banner__content .image-credit {
top: 0;
right: 0; }
@media (min-width: 768px) {
.callout-banner__content .image-credit {
top: unset;
bottom: 2rem;
right: 1.5rem; } }
.callout-banner__content-wrapper {
width: 100%;
max-width: 72.125rem;
margin: 0 auto;
position: relative; }
@media (min-width: 768px) {
.callout-banner__content-wrapper {
position: initial; } }
.callout-banner--has-image .callout-banner__content-wrapper {
margin-top: calc(50vw - 32px); }
.callout-banner__image {
height: 70vw;
position: relative;
width: 100vw; }
@media (min-width: 900px) {
.callout-banner__image {
height: auto;
min-height: 100%;
padding-bottom: 0; } }
.callout-banner__image img {
width: 100%;
object-fit: cover;
min-height: 100%;
max-height: 40.625rem; }
.callout-banner__image-overlay { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 54%, black 89%, black 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 54%, black 89%, black 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 54%, black 89%, black 100%); position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }
@media (min-width: 900px) {
.callout-banner__image-overlay {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.7) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.7) 100%); background: linear-gradient(top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.7) 100%); } }
.callout-banner__title {
color: #000000;
font-size: 2rem;
text-transform: uppercase;
padding-right: 4.5rem; }
@media (min-width: 768px) {
.callout-banner__title {
font-size: 3.375rem; } }
.callout-banner--has-image .callout-banner__title {
color: #ffffff; }
.callout-banner__text {
color: #000000;
font-size: 1.125rem;
line-height: 1.64;
font-family: "Open Sans", Arial, sans-serif;
padding-right: 4.5rem; }
@media (min-width: 768px) {
.callout-banner__text {
font-size: 1.375rem; } }
.callout-banner--has-image .callout-banner__text {
color: #ffffff; }
.callout-banner__cards {
display: flex;
flex-wrap: wrap;
margin-top: 2.375rem; }
@media (min-width: 900px) {
.callout-banner__cards {
flex-wrap: nowrap; } }
.callout-banner__card {
flex-grow: 1;
flex-basis: 100%;
background-color: #ffffff;
padding: 1.25rem 1rem 0.625rem 1rem; }
.callout-banner__card:hover .callout-banner__card-link::after {
transform: translateX(3px); }
@media (min-width: 900px) {
.callout-banner__card {
flex-basis: 0; } }
.callout-banner--has-image .callout-banner__card {
padding-top: 0.75rem;
padding-bottom: 0.75rem; }
@media (min-width: 900px) {
.callout-banner--has-image .callout-banner__card {
padding-top: 1.625rem;
padding-bottom: 1.625rem; } }
.callout-banner__card + .callout-banner__card {
margin-top: 1rem; }
@media (min-width: 900px) {
.callout-banner__card + .callout-banner__card {
margin-top: 0;
margin-left: 1.625rem; } }
.callout-banner__card-text {
color: #000000;
font-family: "Open Sans", Arial, sans-serif;
font-size: 0.875rem;
line-height: 2.07;
padding-bottom: 2.25rem;
margin-bottom: 0.8125rem;
border-bottom: 2px solid #000000; }
.callout-banner--has-image .callout-banner__card-text {
padding-bottom: 2rem; }
.callout-banner__card-link {
display: flex;
align-items: center;
justify-content: space-between;
color: #000000;
font-size: 1.125rem;
text-transform: uppercase;
font-weight: 800; }
.callout-banner__card-link::after {
transition: all 0.25s; }
@media (min-width: 420px) {
.callout-banner__card-link {
font-size: 1.375rem; } }