@media (min-width: 450px) and (max-width: 900px) {

h1{
  font-family: 'Playfair Display', serif;
  font-size:max(20px + 1.1vw, 22px );
  color:#707070;
  font-weight: 500;
  transform:scale(1,1.055);
}

h2{
  font-family: 'Playfair Display', serif;
  font-size:max(20px + 0.6vw, 22px );
  color:#707070;
  font-weight: 500;
  transform:scale(1,1.055);
}

p{
  font-family: 'Roboto', sans-serif;
  color:#707070;

  font-size: max(16px + 0.2vw , 13px);
  line-height: max(19px + 1vh , 17px);

}

span{
  font-family: 'Roboto', sans-serif;
  color:#000000;
   font-size: max(17px + 0.2vw , 15px);
  line-height: max(19px + 1vh , 17px);
}


button.button{
  outline:none;
  border:none;

  position:relative;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;

  padding:1.5em;

  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: rgb(14, 14, 14);
  color:white;

  margin-top:1.3rem;

  border-radius:2px;

  cursor: pointer;

  white-space:nowrap;

  width:13em;
  height:2em;

  overflow:hidden;

  align-self: flex-end;
}



button > img{
object-fit: contain;
width:2.5em;
margin-left:0.5em;
}



button:hover > img{
  transform:translateX(0.3em);
}

button:focus > img{
  
  
  animation: arrow 0.3s ease-in forwards, arrowback 0.3s ease-in 1s forwards;
  
}


@keyframes arrow {
  0% {
    transform:translateX(0);
  }
  20% {
    transform:translateX(-0.2em);
  }
  100% {
    transform:translateX(4em);
  }
}
@keyframes arrowback {
  to {
    transform:translateX(0);
  }
}



}