.hero{
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: flex-start;
  text-align: center;

  gap: .5rem;
}

.hero h1{
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
}

.hero h2{
  color: var(--color-text-muted);
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
}

.logo{
  width: clamp(10rem, 30vw, 12rem);
}