body, html {
    height: 100%;
}

.hero-image {
  width: 100vw;        /* full viewport width */
  margin-left: 50%;    /* shift left */
  transform: translateX(-50%); /* center it */
  height: 500px;
  background-image: url("../assets/flatirons.webp");
  background-size: cover;
  background-position: center;
  background-repeat: repeat-y;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 900;
}