.story-grid {
max-width: 78.4375rem;
margin: 0 auto;
margin: 3.125rem auto; }
@media (min-width: 1280px) {
.story-grid__boundary {
display: flex;
padding: 0 3.125rem 0 0; } }
.story-grid__image {
flex-basis: 37.5rem;
position: relative;
align-self: flex-start;
justify-content: flex-end;
overflow: hidden; }
@media (min-width: 1280px) {
.story-grid__image {
width: 600px;
margin-right: 0.75rem;
height: auto;
display: flex;
max-height: none; } }
.story-grid__image img {
display: block;
width: 100%; }
@media (min-width: 1280px) {
.story-grid__image img {
width: auto; } }
.story-grid__image-credit {
font-size: 0.5rem;
color: #ffffff;
font-weight: 500;
font-family: "Open Sans", Arial, sans-serif;
position: absolute;
bottom: 0;
right: 0;
padding: 0.5rem;
text-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.5); }
.story-grid__content {
flex-basis: 40.375rem;
padding: 2.5rem 1.25rem; }
@media (min-width: 900px) {
.story-grid__content {
padding: 2.5rem 3.125rem; } }
@media (min-width: 1280px) {
.story-grid__content {
padding-left: 3.75rem;
padding-right: 0; }
.home .story-grid__content {
padding-top: 3.75rem; } }
.story-grid__title {
font-size: 2.5rem;
text-transform: uppercase; }
@media (min-width: 900px) {
.story-grid__title {
font-size: 3.5rem; } }
@media (min-width: 1280px) {
.story-grid__title {
font-size: 4.5rem; } }
.story-grid__title p {
margin: 0; }
.story-grid__link {
text-transform: uppercase;
font-size: 1rem;
font-family: "Arquitecta", Arial, sans-serif;
text-decoration: none;
font-weight: 900;
display: flex;
align-items: center;
color: #000000; }
@media (min-width: 900px) {
.story-grid__link {
font-size: 1.125rem; } }
.story-grid__link::after {
width: 1rem;
height: 1rem;
display: inline-block;
content: " ";
background-image: url(//www.groundsforsculpture.org/wp-content/themes/grounds-for-sculpture/dist/Components/DocumentDefault/Assets/chevron-right.svg);
background-repeat: no-repeat;
background-size: contain;
margin-left: 0.7rem; }
.story-grid__cards {
margin-top: 3rem;
overflow: hidden; }
@media (min-width: 768px) {
.story-grid__cards {
display: flex;
flex-direction: row;
flex-wrap: wrap; } }
@media (min-width: 1280px) {
.story-grid__cards {
display: block; } }
.story-grid__card {
width: 100%;
margin-bottom: 1.25rem;
display: flex;
display: inline-block; }
@media (min-width: 768px) {
.story-grid__card {
flex: 1 1 50%; }
.story-grid__card:nth-child(odd) {
padding-right: 0.625rem; }
.story-grid__card:nth-child(even) {
padding-left: 0.625rem; } }
@media (min-width: 1280px) {
.story-grid__card:nth-child(odd) {
padding-right: 0; }
.story-grid__card:nth-child(even) {
padding-left: 0; } }
.story-grid__card:last-child {
margin-bottom: 0; }
.story-grid__card-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 1.125rem 1.5rem;
color: #ffffff;
text-transform: uppercase;
display: flex;
flex-direction: column;
justify-content: flex-end;
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%); }
.story-grid__card-headline {
display: block;
font-size: 1.125rem;
font-weight: 500;
font-style: italic; }
@media (min-width: 768px) {
.story-grid__card-headline {
font-size: 1.375rem; } }
.story-grid__card-title {
display: block;
font-size: 1.5625rem;
font-weight: 900;
margin-top: -0.3125rem; }
@media (min-width: 420px) {
.story-grid__card-title {
font-size: 2rem; } }
@media (min-width: 768px) {
.story-grid__card-title {
font-size: 2.5rem; } }
@media (min-width: 1280px) {
.story-grid__card-title {
font-size: 3.375rem; } }
.story-grid__card-image {
position: relative;
display: block; }
.story-grid__card-image img {
width: 100%;
object-fit: cover;
display: block; }
.story-grid__image-credit {
flex-basis: 32%;
font-size: 0.5625rem;
text-align: right;
font-family: "Open Sans", Arial, sans-serif;
font-weight: 500;
z-index: 1;
text-transform: none; }