.fonts {
  display: flex;
  flex-direction: column;
}

.fonts-item {
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: var(--spacing);
  text-decoration: none;

  &:not(:first-of-type) {
    border-top: var(--border-width) var(--border-style) var(--border-color);
  }

  &(:last-of-type) {
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
  }

  &:first-of-type {
    border-top-left-radius: var(--border-radius-large);
    border-top-right-radius: var(--border-radius-large);
  }

  &:last-of-type {
    border-bottom-left-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large);
  }

  &:hover {
    background-color: hsl(292, 32%, 95%);
  }
}

.fonts-item__label {
  color: var(--color-primary);
}

.fonts-item__premise {
  margin-inline-start: var(--spacing);
}

.fonts-item__example {
  font-size: var(--font-size-huge);
  margin-block: var(--spacing);
}