.quote {
  padding-bottom: 20rem;
  position: relative;
  margin: 0;
}

.quote::before {
  opacity: 15%;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url("../images/background/folkvar.png");
  background-repeat: no-repeat;

  background-size: 25rem;
  background-position: right;
}

.quote::after {
  display: none;
  opacity: 25%;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url("../images/background/alva.png");
  background-repeat: no-repeat;

  background-size: 25rem;
  background-position: left;
}

.quote__text {
  color: transparent;
}

@media (min-width:768px) {
  .quote {
    padding-left: 20vw;
    padding-right: 20vw;
  }

  .quote::after {
    display: block;
  }
}

.type {
  font-style: italic;
  color: #0000;
  background:
    linear-gradient(-90deg, #00dffc00 5px, #0000 0) 10px 0,
    linear-gradient(var(--main-color) 0 0) 0 0;
  background-size: calc(var(--n)*1ch) 200%;
  -webkit-background-clip: padding-box, text;
  background-clip: padding-box, text;
  background-repeat: no-repeat;
  animation:
    b .7s infinite steps(1),
    t calc(var(--n)*.05s) forwards;
}

@keyframes t {
  from {
    background-size: 0 200%
  }
}

@keyframes b {
  50% {
    background-position: 0 -100%, 0 0
  }
}