$iso-paper-ratio: 141.42135624%;

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

.letter {

  padding: 0;
  margin: 0 0 $gutter 0;
  position: relative;
  background: $panel-colour;

  &:before {
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -0.5em;
    font-size: 96px;
    color: $white;
    overflow: hidden;
    display: block;
    vertical-align: bottom;
    animation: ellipsis steps(4,end) 1.3s infinite;
    content: "\2026"; // ellipsis
    width: 0px;
  }

  a {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding: $iso-paper-ratio 0 0 0;
    position: relative;
    z-index: 20;
  }

  img {
    display: block;
    width: 100%;
    background: $white;
    box-shadow: inset 0 0 0 1px $border-colour;
    position: absolute;
    top: 0;
    left: 0;
  }

}
