@keyframes scroll-down {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.home-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 9rem 0 4rem;
  min-height: 100svh;
  background-color: var(--color-mine-shaft);
  overflow: hidden;

  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bg-overlay {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		background-image: linear-gradient(lab(20.5639 1.08807 -0.307226 / 0.6) 0%, lab(20.5639 1.08807 -0.307226 / 0.4) 50%, lab(20.5639 1.08807 -0.307226 / 0.9) 100%);
	}

  .container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    max-width: 900px;
    margin-inline: auto;
  }
}

.home-intro {
  padding: 5rem 0;
  @media (width >= 1200px) {
    padding: 9rem 0;
  }
}