/* Hero Image */
.hero::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  user-select: none;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-image: var(--hero-image);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

/* On touch devices */
@media only screen and (max-device-width: 1023px) {
  .hero::before {
	background-attachment: scroll;
  }
}