@keyframes panBackground {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.home-hero {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  --background-overlay: #00000088;
  background-image: linear-gradient(to bottom, var(--background-overlay), var(--background-overlay)), url('../assets/hero-background.jpg');
  background-size: 125%;
  background-position: 0% 0%;
  animation: panBackground 240s linear infinite;
}

.home-hero-content {
  text-align: center;
}