@font-face{
  font-family:'Viento Guajira';
  src:url('assets/fonts/Viento_guajira-Regular.otf') format('opentype'),
      url('assets/fonts/Viento_guajira-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.font-lab{
  --tester-font:'Viento Guajira';
  padding:52px clamp(24px,4vw,72px) 20px;
}

.font-lab[hidden]{
  display:none;
}

.font-lab.is-visible{
  animation:build-font-lab .8s ease both;
}

@keyframes build-font-lab{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

.font-lab-heading{
  margin-bottom:28px;
}

.font-lab-heading small{
  display:block;
  letter-spacing:.12em;
}

.font-lab-heading h2{
  margin:6px 0 0;
  font-size:clamp(1.9rem,3vw,3.4rem);
  font-weight:500;
}

.font-tester-label{
  display:block;
  margin-bottom:10px;
  font-size:.72rem;
  letter-spacing:.09em;
}

.font-tester{
  display:block;
  width:100%;
  min-height:190px;
  resize:vertical;
  border:1px solid rgba(39,39,39,.2);
  border-radius:0;
  outline:none;
  padding:24px 0;
  font-family:var(--tester-font);
  font-size:clamp(3.4rem,8vw,8.5rem);
  font-weight:400;
  line-height:1.1;
}

@media(max-width:700px){
  .font-lab{
    padding:38px 20px 10px;
  }

  .font-tester{
    min-height:150px;
  }
}