.about-hero {
  display: flex;
  flex-direction: column;
  position: relative;

  color: white;
  background-color: var(--color-dark-blue-darkened);
}

.about-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(60% 60% at 50% 35%, var(--color-dark-blue) 0%, transparent 100%);
  pointer-events: none;
}