.banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://miro.medium.com/proxy/1*SjWbBE6AMWzfx-GlSZcz2g.png);
  height: 400px;
  background-position: center;
  }

 .hero-text h2{
  font-weight:lighter;
  font-size:36px;
  font-family: 'Lora';
  }

 img{
  height: auto;
  width: 100%;
}

  .hero-text p{
  color: #757575;
  font-family: 'Lora';
  font-weight: 300px;
  font-size:24px;
  }

   .hero-text h8{
  color: #757575;
  font-family: 'Lora';
  font-weight: 200px;
  font-size:16px;
  }

  .container{
  width: 50%;
  margin: 50px auto;
}

  .container p{
  font-family: 'Lora';
  font-weight: 150px;
  font-size:18px;
  color: #2A2A2A;
  line-height: 1.5;
  }

  .info{
    margin-top:50px;
  }

  .info h1{
    font-size:30px;
    font-weight:400px;
    font-weight: bolder;
    font-family: 'Lora';
  }

 .container p span{
   background-image: linear-gradient(rgba(233, 253, 240, 1), rgba(233, 253, 240, 1));
  }

  .container p:hover span{
   background-image: linear-gradient(#d7fae1,#d7fae1);
  }

@media (max-width: 960px) {
  /* For a screen < 960px, this CSS will be read */
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  /* For a screen < 720px, this CSS will be read */
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  /* For a screen < 540px, this CSS will be read */
  .container {
    width: 300px;
  }
}