@import './style.css';

#intro .img-bg{
   background: url('../img/o-que-fazer/turismo-religioso/bg-turismo-religioso.webp') center center no-repeat;
}




/* turismo-religioso */
#turismo-religioso{
   padding: 0 130px;
   display: grid;
   grid-template-columns: 60% 40%;
   grid-template-rows: auto;
   height: 100vh;
   width: 100vw;
   max-width: 100%;

   align-content: center;
}

#turismo-religioso .texto{
   padding-left: 0;
}

.texto{
   align-self: center;
   width: 90%;

   padding-left: 50px;
}

.texto .citacao{
   font-size: 2em;
   font-style: italic;
   text-align: right;
}

.container img{
   display: grid;

   justify-self: center;
   align-self: center;
}





/* cards */
#cards{
   padding: 0 130px;
   margin: 0 auto;
   width: 80%;
   max-width: 100%;
   height: 100%;

   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: center;
}

#cards .card{
   padding: 10px;
   display: flex;

   flex-direction: column;
   flex-basis: 400px;
   flex-shrink: 1;
   justify-content: center;

   margin: 50px 0;
   transition: all .3s;
}

#cards a.card:hover{
   background-color: var(--amarelo);
   transition: all 0.3s;
}

#cards .card h3{
   margin: 30px 0;
   height: 80px;
}

#cards a.card:hover h3, #cards a.card:hover p{
   color: #fff;
}

#cards .card .card-texto{
   display: flex;
   flex-grow: 1;
   flex-direction: column;

   margin-bottom: 50px;
}

#cards .card .card-texto p{
   font-size: 1.2em;
   
   padding-top: 10px;
}

#cards .card .card-btn{
   display: grid;
   justify-content: center;
   padding: 10px 0;
}