.dichotomy {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 2rem;
}

.dichotomy + .dichotomy {
  border-top: 1px solid var(--color-lighter);
  padding-top: 2rem;
}

.dichotomy > .word:first-child {
  color: var(--color-half);
}

h2 {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

#hero-bg {
  background: url('https://images.unsplash.com/photo-1507963901243-ebfaecd5f2f4?fit=crop&q=80&w=1920') center/cover
    no-repeat;
}

#glossary .layer-inset {
  flex-direction: unset;
  gap: 3rem;
}

main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-clamp);
  min-width: 0;
}

#legend {
  background: var(--color-lightest);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1.5rem var(--color-light);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  width: 15rem;
}

.legend-item {
  font-size: 14px;
}

.read-more {
  font-size: 14px;
  margin-top: 0.25rem;
  text-decoration: underline;
  width: fit-content;
}

.avoid {
  color: var(--color-light);
}

.use {
  color: var(--color-darker);
}

.synonyms {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.word {
  border-radius: 0.5rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 15rem;
}

.words {
  column-gap: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  row-gap: 4rem;
}

@media (max-width: 70rem) {
  .dichotomy > .word:first-child {
    flex-basis: 100%;
  }
}

@media (max-width: 48rem) {
  #glossary .layer-inset {
    flex-direction: column;
  }

  #legend {
    width: 100%;
  }
}