@lost gutter 1rem;
@lost flexbox flex;

.specimenRoot {
  margin-top: var(--size-lg-i);
}

.specimenContainer {
  padding-top: var(--size-lg-ii);
  padding-bottom: var(--size-lg-ii);
  padding-left: var(--size-lg-i);
  padding-right: var(--size-lg-i);
  overflow-x: auto;
  -webkit-overflow-scroll: smooth;
}

.specimen {
  font-family: var(--font-avenir);
  display: inline-block;
  white-space: nowrap;
}

.fontLargeV { font-size: var(--fontsize-large-v); }
.fontLargeIv { font-size: var(--fontsize-large-iv); }
.fontLargeIii { font-size: var(--fontsize-large-iii); }
.fontLargeIi { font-size: var(--fontsize-large-ii); }
.fontLargeI { font-size: var(--fontsize-large-i); }
.fontRegular { font-size: var(--fontsize-regular); }
.fontSmallI { font-size: var(--fontsize-small-i); }
.fontSmallIi { font-size: var(--fontsize-small-ii); }

.bold { font-weight: var(--fontweight-bold); }
.demi { font-weight: var(--fontweight-demi); }
.regular { font-weight: var(--fontweight-regular); }

.weightGroup {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

.weight {
  display: inline-block;
  lost-column: 1/1;
  margin-top: var(--size-lg-i);
}

@media(--typography-2up) {
  .weight {
    lost-column: 1/2;
  }
}

@media(--typography-3up) {
  .weight {
    lost-column: 1/3;
  }
}