@media (min-width: 768px) {
    .hero {
        background-image: url("/base/images/hero-image-7.jpg");
        background-repeat: no-repeat;
        background-clip: border-box;
        background-position-y: 58%;
        /* Make the bg use the whole screen width */
        background-size: cover;
    }
    .hero:after {
      background-color: rgba(0, 0, 0, 0.09);
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
      background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0)));
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
      background-image: linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
      background-repeat: repeat-x;
      background-color: #f6f6f6;
      border-bottom: 1px solid #d0d0d0;
      border-radius: 3px 3px 0 0;
      -webkit-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.03);
      box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.03);
    }
    .hero:after .back:hover {
      text-decoration: none;
    }
    .hero:after .back:hover span {
      text-decoration: underline;
    }
}