.homepage {
  --accent-line: var(--super-teal-900);
  --accent-weight: 2px;
  margin: 0;
}

.hero-section {
  background-color: var(--super-teal-900);
  max-width: var(--container-max);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  position: relative;
}

.hero-section:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(#2e1e1014 0%, #22150a38 100%);
  position: absolute;
  inset: 0;
}

@media (width >= 769px) {
  .hero-section {
    aspect-ratio: 2560 / 1093;
    background-position: bottom;
    max-width: 1040px;
    min-height: 300px;
    max-height: 690px;
  }
}

@media (width <= 768px) {
  .hero-section {
    min-height: 220px;
  }
}

.welcome-section {
  background: var(--super-white);
  padding: .75rem 0 2.75rem;
}

.welcome-section .container {
  max-width: 1100px;
  padding: 1.5rem 2rem 2.25rem;
}

.welcome-section h1 {
  color: var(--super-teal-900);
  text-align: center;
  --h1-accent-width: min(620px, 85%);
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.25;
  position: relative;
}

.welcome-section h1:before, .welcome-section h1:after {
  content: "";
  width: calc(var(--h1-accent-width) / 2);
  height: var(--accent-weight);
  border-radius: 0;
  position: absolute;
  bottom: 0;
}

.welcome-section h1:before {
  background: var(--accent-line);
  right: 50%;
}

.welcome-section h1:after {
  background: var(--accent-line);
  left: 50%;
}

.welcome-section p {
  color: var(--color-text-primary);
  margin-bottom: 1.125rem;
  font-size: 1.25rem;
  line-height: 1.7;
}

.welcome-section ul {
  margin: 0 0 1.125rem 1.5rem;
  padding: 0;
}

.welcome-section li {
  color: var(--color-text-primary);
  margin-bottom: .75rem;
  font-size: 1.25rem;
  line-height: 1.7;
}

@media (width <= 768px) {
  .welcome-section h1 {
    font-size: 1.75rem;
  }

  .welcome-section p, .welcome-section li {
    font-size: 1.125rem;
  }
}