@media(max-width: 1440px){
   #intro .btn{
      font-size: 1em;
      width: 200px;
      height: 50px;
   }

   #intro img{
      width: 60%;
   }

   #mosteiro #historia{
      height: 100%;
      padding: 30px;
   }

   #mosteiro, #historia img{
      padding-right: 30px;
   }
}

@media(max-width: 1024px) {
   #mosteiro #historia{
      display: flex;
      flex-direction: column;
   }
   
   #mosteiro #historia .texto{
      padding-top: 30px;
      padding-left: 30px;
   }

   #mosteiro #morrinho-hoje .texto{
      padding-right: 30px;
   }
}

@media(max-width: 768px){
   #mosteiro #historia{
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 50px;
   }

   #mosteiro #historia .texto{
      padding-left: 0;
      padding-right: 0;
   }

   #mosteiro #historia img{
      padding-bottom: 20px;
   }

}


@media(max-width:600px){
   #intro .img-bg{
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
   }

   #intro .img-bg img{
      width: 80%;
      margin-bottom: 40px;
   }

   #intro .img-bg a.btn{background-color: rgba(0, 0, 0, .2);}

   h4{
      margin: 0;
   }

   #intro .img-bg{
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-evenly;
   }

   #intro .img-bg #slogan{
      width: 60%;

      order: 2;
   }
}