.hero-image{
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Common/ImagenIglesia.JPG");
    height: 25vh;
    max-width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
  
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--background-white-color);
    font-size: 20px;
    font-weight: bold;
}

.descripcion {
    width: 90%;
    height: 110vh;
    text-align: center;
    color: var(--background-dark-color);
    margin-top: 5%;
    margin-left: 5%;
}

.activityCard {
    width: 100%;
    height: 165vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 50vh 50vh 50vh;
    grid-row-gap: 5vh;
    grid-template-areas: 
    "activity1"
    "activity2"
    "activity3";
    background-color: var(--background-dark-color);
}

.activity1{
    grid-area: activity1;
    background-color: #A3614E;
    transition: all .2s ease-in-out
}

.activity2{
    grid-area: activity2;
    background-color: #BD8056;
    transition: all .2s ease-in-out
}

.activity3{
    grid-area: activity3;
    background-color:#B17153;
    transition: all .2s ease-in-out
}

.card{
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 30% 40%;
    grid-row-gap: 10%;
    grid-template-areas: 
    "tituloCard"
    "textoCard";
    transition: all .2s ease-in-out
}

.card:hover{
    transform: scale(1.05);
}

.tituloCard{
    grid-area: tituloCard;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 5vh;
    color: var(--background-white-color);
}

.textoCard{
    grid-area: textoCard;
    font-size: 0.90em;
    text-align: center;
    color: var(--background-white-color);
    max-width: 90%;
    margin-left: 5%;
}

.proximasActividades{
    width: 100%;
    height: 115vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 50vh 50vh;
    grid-row-gap: 5vh;
    grid-template-areas:
    "evento1"
    "evento2";
    margin-top: 5vh;
    margin-bottom: 5vh;
    background-color: var(--background-dark-color)
}

.evento{
    grid-area: evento1;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 45% 45%;
    grid-row-gap: 20%;
    grid-template-areas: 
    "fotoActividad"
    "textoActividad";
    overflow-y: hidden;
}

.fotoActividad{
    grid-area: fotoActividad;
    width:100%;
    max-height:100%;
    align-self: center;
}

.textoActividad{
    grid-area: textoActividad;
    font-size: 20px;
    text-align: center;
    color: var(--background-white-color);

}


.actividadPrincipalContainerImpar{
    width: 100%;
    height: 160vh;
    margin-top: 5%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 35% 55%;
    grid-row-gap: 5%;
    grid-template-areas: 
    "fotoActividadPrincipal"
    "textoActividadPrincipal";
    overflow-y: hidden;
}

.actividadPrincipalContainerPar{
    width: 100%;
    height: 160vh;
    margin-top: 5%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 35% 55%;
    grid-row-gap: 5%;
    grid-template-areas: 
    "fotoActividadPrincipal"
    "textoActividadPrincipal";
    overflow-y: hidden;
}

.fotoActividadPrincipal{
    grid-area: fotoActividadPrincipal; 
    width: 100%;
    height: 100%;
}

.textoActividadPrincipal{
    grid-area: textoActividadPrincipal;
    text-align: center;
    color: var(--background-dark-color);
    max-width: 90%;
    margin-left: 5%;
}

@media screen and (min-width: 765px) and (max-width: 1024px){
    .hero-image{
        height: 35vh;
    }
    .hero-text {
        font-size: 45px;
    }

    .descripcion {
        height: 35vh;
        text-overflow: ellipsis;
        font-size: 1.5vw;
        margin-bottom: 1%;   
    }

    .actividadPrincipalContainerImpar{
        width: 80%;
        height: 75vh;
        margin-top: 5%;
        margin-left: 10%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 55% 40%;
        grid-row-gap: 5%;
        grid-template-areas: 
        "fotoActividadPrincipal"
        "textoActividadPrincipal";
        overflow-y: hidden;
    }
    
    .actividadPrincipalContainerPar{
        width: 80%;
        height: 75vh;
        margin-top: 5%;
        margin-left: 10%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 55% 40%;
        grid-row-gap: 5%;
        grid-template-areas: 
        "fotoActividadPrincipal"
        "textoActividadPrincipal";
        overflow-y: hidden;
    }
    
    .fotoActividadPrincipal{
        grid-area: fotoActividadPrincipal; 
        width: 100%;
        height: 100%;   
    }
    
    .textoActividadPrincipal{
        font-size: 1.5vw;
    }

}

@media screen and (min-width: 1024px){
    .hero-image{
        height: 50vh;
    }
    .hero-text {
        font-size: 65px;
    }

    .descripcion {
        height: 35vh;
        font-size: 1.1vw;
        margin-bottom: 1%;
    }

    .activityCard {
        width: 80%;
        margin-left: 10%;
        height: 40vh;
        display: grid;
        grid-template-columns: 30% 30% 30%;
        grid-template-rows: 100%;
        grid-row-gap: 0vh;
        grid-column-gap: 5%;
        grid-template-areas: 
        "activity1 activity2 activity3";
    }

    .textoCard{
        font-size: 1.1vw;
    }
  
    .proximasActividades{
        width: 80%;
        margin-left: 10%;
        height: 40vh;
        grid-template-columns: 100%;
        grid-template-rows: 20vh 20vh;
        grid-row-gap: 0%;
    }
    
    .evento1{
        grid-template-columns: 50% 50%;
        grid-template-rows: 100%;
        grid-row-gap: 0%;
        grid-template-areas: 
        "fotoActividad1 textoActividad1";
    }

    .evento2{
        grid-template-columns: 50% 50%;
        grid-template-rows: 100%;
        grid-row-gap: 0%;
        grid-template-areas: 
        "textoActividad2 fotoActividad2";
    }

    .textoActividad1{
        margin-top: 5%;
    }

    .textoActividad2{
        margin-top: 5%;
    }

    .actividadPrincipalContainerImpar{
        width: 80%;
        height: 35vh;
        margin-top: 0.5%;
        margin-left: 10%;
        grid-template-columns: 50% 49%;
        grid-template-rows: 100%;
        grid-row-gap: 0%;
        grid-template-areas: 
        "fotoActividadPrincipal textoActividadPrincipal";
    }
    
    .actividadPrincipalContainerPar{
        width: 80%;
        margin-top: 0.5%;
        height: 35vh;
        margin-left: 10%;
        grid-template-columns: 50% 49%;
        grid-template-rows: 100%;
        grid-row-gap: 0%;
        grid-template-areas: 
        "textoActividadPrincipal fotoActividadPrincipal";
    }

    .fotoActividadPrincipal{
        max-width: 100%;
        width: 100%;
        height: 100%;
        margin-left: 0%;
        margin-top: 0%;
    }

    .textoActividadPrincipal{
        font-size: 1vw;
        overflow: hidden;
    }

}