.lined {
  position: relative;

  &:after, &:before {
    content: " ";
    position: absolute;
    top: -200px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.18);
    height: 0;
    animation: line 0.5s ease-in forwards;
  }

  &.after:after {
    right: 0;
  }

  &.before:before {
    left: 0;
  }
}

@keyframes line {
  from {
    height: 0;
  }
  to {
    height: calc(100dvh + 200px);
  }
}

@keyframes lineShort {
  from {
    height: 0;
  }
  to {
    height: 400px;
  }
}

@keyframes lineLeft {
  from {
    width: 0;
  }
  to {
    width: 100px;
  }
}

@keyframes lineRight {
  from {
    width: 0;
  }
  to {
    width: 70%;
  }
}