.hero {
  height: 692px;
  background: url("../images/hero@2x.png") repeat-x top center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;

  h1 {
    color: $background-color;
    margin-bottom: 30px;
    margin-top: -100px;
  }
}

main {
  margin-top: -150px;
}

.card-artiq {
  background: #fff url("../images/artiq@2x.png") no-repeat top right;
}

.card-gateware {
  background: #fff url("../images/gateware@2x.png") no-repeat top right;
}

.card h5,
h5 {
  color: $brand-color;
}

h3 {
  color: $color-secondary;
}

.shadow.sticky-top {
  background: #fff;
}