#OpenType {
  row-gap: var(--gridGap0);
}
#OpenType div.otShowcase {
  display: grid;
  grid-column: var(--gridColumnMainChild);
  grid-template-columns: var(--gridColumnMainParent);
  grid-gap: var(--gridGap1);
  margin: 0.8rem 0 0.9rem;
}
#OpenType div div {
  font-size: 2.4rem;
}
#OpenType div aside {
  grid-column: var(--gridColMainCol1);
  font-size: var(--fontSize2);
  font-family: var(--fontSans);
}
#OpenType div div.off, #OpenType div div.on {
  grid-row: 1/3;
}
.off {
  grid-column: 4/7;
  align-self: end;
}
.on {
  grid-column: 8/11;
  align-self: end;
}
#OpenType div.on.feaTitle, #OpenType div.off.feaTitle {
  font-size: var(--fontSize3);
  font-family: var(--fontSans);
  font-weight: 500;
  border-bottom: 1px #000 solid;
  padding: 0 0 0.2rem;
}
.italic {
  font-style: italic;
}

.sups {
  font-variant-position: super;
  font-feature-settings: 'sups' on;
}
.subs {
  font-variant-position: sub;
  font-feature-settings: 'subs' 1;
}
.case {
  text-transform: uppercase;
  font-feature-settings: 'case' on;
}
.dlig {
  font-variant-ligatures: discretionary-ligatures;
  font-feature-settings: 'dlig' on;
}
.swsh {
  font-feature-settings: "swsh" on;
}
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
}
.lnum {
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' on;
}
.numr {
  font-feature-settings: "numr";
}
.dnom {
  font-feature-settings: "dnom";
}

.off_CALT {
  font-feature-settings: 'calt' off;
}

.on_SS03 {
  font-feature-settings: 'onum' on, 'ss03' on;
}
.tnum > .lnum {
  font-feature-settings: 'tnum' on, 'lnum' on;
}

@media only screen and (max-width: 812px){
  #OpenType div {
    font-size: calc(var(--fontSize3) + 0.2rem);
    margin: var(--gridGap1) 0 0 0;
  }
  #OpenType .off {
    grid-column: 1/7;
    margin-bottom: var(--gridGap1);
  }
  #OpenType .on {
    grid-column: 7/13;
    margin-bottom: var(--gridGap1);
  }

}