section#intro.flx.flx-col.bg-beluga(
  data-component="mirror, family"
)
  .container.pt5.pb4.ta-c
    .fs10.lh120.pv4
      for weight in font.weights
        samp.dib(class=`fw${weight.value}` data-width=samples.alphanumeric)
          input(placeholder=samples.alphanumeric title="Edit me!")

    .flx.flx-col-sm.flx-jb
      ul.list-bare.flx.flx-c.p0.mv1
        li.mr2.active
          button.p0.ff-normal(data-font-family="") Normal
        li.mr2
          button.p0.ff-condensed(data-font-family="condensed") Condensed
        li
          button.p0.ff-mono(data-font-family="mono") Mono

      a.bg-orangered.clr-beluga.pv2.ph3.mv1.txt-bare.ttu.fw600.fs2.dib(
        download
        href=encodeURI(`/Reddit Sans ${font.version}.zip`)
      )
        | Download v#{font.version}
