.pre {
  display: grid;
  margin-top: var(--space-xx-large);
  padding-inline: var(--space-large);
}

.pre a {
  color: var(--color-green);
  font-weight: normal;
  justify-self: center;
  text-decoration: none;
}

.pre pre {
  color: var(--color-green);
  font-size: clamp(0.425rem, 1.25vw, 1rem);
  justify-self: center;
  letter-spacing: -0.0425em;
  line-height: 1.09375;
  transition: color var(--transition), opacity var(--transition);
  white-space: pre;
}

.pre--ttfx a {
  display: grid;
  overflow: hidden;
  position: relative;
}

.pre__ttfx-canvas {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity var(--transition);
}

.pre--ttfx.is-ttfx-ready pre {
  opacity: 0;
}

.pre--ttfx.is-ttfx-ready .pre__ttfx-canvas {
  opacity: 1;
}



@media(hover: hover) {

  .pre a:hover pre {
    color: var(--color-turquoise);
  }

}



@media(prefers-reduced-motion: reduce) {

  .pre__ttfx-canvas {
    display: none;
  }

}



@media(min-width: 64em) {

  .pre {
    margin-top: var(--space-xxxx-large);
    padding-inline: var(--space-xx-large);
  }

}



.pre--error {
  margin-top: 0;
}



.pre--news {
  margin-top: var(--space-x-large);
}

.pre--news pre {
  font-size: clamp(0.1417rem, 0.4167vw, 0.3333rem);
}