Here is some code from _type.scss:

h2 {
  margin-top: 1rem;
  font-size: 1.5rem;
}

h3 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
}

h4, h5, h6 {
  margin-top: 1rem;
  font-size: 1rem;
}

I have two questions about it:

1. Why is the margin of h3 larger than the one of h2? Shouldn't the larger section have a larger margin?
2. The styles of h4, h5, and h6 are the same. So how does a reader distinguish them?