@use 'vars' as *;
@use '../mixins' as *;

.document {
  @include font-sm;

  line-height: 1.625;
}

.document__container {
  --max-width-container: 910px;

  padding-block: 32px 48px;
}

.document > section {
  padding: 24px;
  border-radius: $radius-2xl;
  border: 1px solid $document-section-border;
  background-color: $document-section-bg;

  @include from-br(sm) {
    padding: 32px;
  }
}

.document h1 {
  @include font-lg;

  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: $document-heading;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid $document-header-border;
}

.document ul {
  margin-bottom: 24px;
  padding-left: 16px;
  list-style: inside;
}

.document li:not(:last-child) {
  margin-bottom: 12px;
}

.document p:not(:last-child) {
  margin-bottom: 16px;
}

.document ul,
.document p {
  color: $document-text;
}

.document h2 {
  @include font-sm;

  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 12px;
  color: $document-heading;
  text-transform: uppercase;
}

.document h2:first-child {
  margin-top: 0;
}

.document a {
  color: $document-link;

  @include hover(color) {
    color: $document-link--hover;
  }
}