.feature-items {
  background: #e4e0d9;
  overflow: hidden;
  margin: 4em auto;
  max-width: 430px;
  padding-bottom: 2em;
  position: relative;
  transition-duration: 0.2s;
}
@media only screen and (min-width: 62em) {
  .feature-items {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (min-width: 87.5em) {
  .feature-items {
    margin-left: 1em;
    margin-right: 1em;
  }
}
.feature-items:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  transition-duration: 0.2s;
}
.feature-items img {
  margin: 0;
}
.feature-items p {
  margin-bottom: 0;
}
.feature-items h2 {
  font-family: 'Give You Glory', arial, sans-serif;
  font-size: 3rem;
  line-height: 1;
  margin: 0em 0 .2em 0;
  padding: .6em .4em .3em .4em;
}
.feature-items h2 a {
  color: #e4e0d9;
}
.feature-items h2 a:hover {
  color: #e4e0d9;
}
@media only screen and (min-width: 62em) {
  .feature-items h2 {
    font-size: 2.6rem;
  }
}
@media only screen and (min-width: 87.5em) {
  .feature-items h2 {
    font-size: 3.2rem;
  }
}
@media only screen and (min-width: 144em) {
  .feature-items h2 {
    font-size: 3.4rem;
  }
}
.feature-items:hover {
  background: #d5cfc4;
}
.feature-items:hover:after {
  box-shadow: inset 0 0 10px rgba(45, 39, 32, 0.75);
}
.feature-items .content {
  padding: .5em 1em;
}
.feature-items .link {
  display: block;
  font-size: 1.8rem;
  text-align: right;
  padding: .5em 1em;
  position: absolute;
  bottom: .3em;
  right: .4em;
}
.feature-blue h2.heading {
  background: #5e7899;
}
.feature-blue a {
  color: #5e7899;
}
.feature-green h2.heading {
  background: #9b9558;
}
.feature-green a {
  color: #9b9558;
}
.feature-red h2.heading {
  background: #552628;
}
.feature-red a {
  color: #552628;
}