:root {
  --box-x-padding: 2rem;
  --box-y-padding: 2rem;
}
@media (min-width: 40em) {
  :root {
    --box-y-padding: 4rem;
  }
}
@media (min-width: 60em) {
  :root {
    --box-x-padding: 3rem;
    --box-y-padding: 6rem;
  }
}
@media (min-width: 40em) {
  section {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 4fr 4fr 5fr;
    grid-template-areas: '. . title' 'img img content' 'img img .';
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
  }
  section::after {
    content: '';
    grid-column: 2/-1;
    grid-row: 1/3;
    position: relative;
    z-index: -1;
    background: #fff;
    box-shadow: 0 0.2em 1em rgba(61,48,41,0.2);
  }
  h1 {
    grid-area: title;
    padding-top: var(--box-y-padding);
    padding-left: var(--box-x-padding);
  }
  .content {
    grid-area: content;
    padding-bottom: var(--box-y-padding);
    padding-left: var(--box-x-padding);
    padding-right: var(--box-x-padding);
  }
  .img {
    grid-area: img;
  }
}
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

h1 {
  font-size: 4em;
  margin: 0 0 1rem;
  font-family: serif;
  position: relative;
}
h1::after {
  content: '';
  position: absolute;
  width: 6rem;
  background-color: #ccc;
  height: 2px;
  top: 0;
  left: 0;
}
@media (min-width: 40em) {
  h1::after {
    left: var(--box-x-padding);
    top: var(--box-y-padding);
  }
}
.content {
  color: #4d4d4d;
  margin-bottom: var(--box-y-padding);
}
@media (min-width: 40em) {
  .content {
    margin-bottom: 0;
  }
}
p {
  margin-top: 0;
  margin-bottom: var(--box-y-padding);
  line-height: 1.5;
}
.content a {
  text-decoration: none;
  border: 1px solid #b3b3b3;
  border-radius: 1em;
  padding: 1em 2em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: inherit;
  display: inline-block;
  background-color: #fff;
}
.img {
  position: relative;
}
.img a {
  position: absolute;
  left: 0;
  bottom: 0;
}
img {
  max-width: 100%;
  vertical-align: middle;
  box-shadow: 0 0.2em 1.2em rgba(61,48,41,0.1);
}
.attribution {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #ea4c89;
  color: #fff;
  padding: 0.5em 1em;
}

footer {
    background-color: #020a4f;
    color: white;
    padding: 1px;
	text-align:center;
	font-size:15px;
}