.cursoBox{
    cursor: pointer;
    width: 100%;
    height: 190px;
    display: grid;
    grid-template-rows: 20px 150px 20px;
    grid-template-columns:  1fr   600px   1fr;
    grid-template-areas:  " .     .       ." 
                          " .     curso   ."
                          " .     .       .";
}
.curso {
    grid-area: curso;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 50px  40px  30px  30px;
    grid-template-columns: 160px   1fr;
    grid-template-areas: " imagen  tema"
                         " imagen  facilita"
                         " imagen  horario"
                         " imagen  lugar";
}
.imagen {
    grid-area: imagen;
    height: 150px;
    display: grid;
    place-items: center;
}
.tema {
    grid-area: tema;
    font-family: 'Lato', sans-serif;
    font-size: 23px;
    color:#2F5D50;
    display: grid;
    place-items: end start;
}
.horario {
    grid-area: horario;
    font-family: 'Lato', sans-serif;
    font-size: 19px;
    color:#9CAF88;
    display: grid;
    place-items: end start;
    letter-spacing: 1px;
}
.facilita {
    grid-area: facilita;
    font-family: 'Lato', sans-serif;
    font-size: 19px;
    color:#9CAF88;
    display: grid;
    place-items: end start;
    letter-spacing: 1px;
}
.lugar {
    grid-area: lugar;
    font-family: 'Lato', sans-serif;
    font-size: 19px;
    color:#9CAF88;
    display: grid;
    place-items: end start;
    letter-spacing: 1px;
}
a.cursoLink,
a.cursoLink *,
a.cursoLink:hover,
a.cursoLink:visited,
a.cursoLink:focus,
a.cursoLink:active {
    text-decoration: none !important;
}
/* ---------------------------------------------------------------------- TITULO CURSOS */
.tituloCursos {
    width: 100%;
    height: 60px;
    display: grid;
    place-items: center;
    font-family: 'Lato', sans-serif;
    font-weight: bolder;
    font-size: 50px;
    color:#EEE;
    margin-top: 10px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* ----------------------------------------------- RESPONSIVE CSS FOR TABLETS AND SMALLER SCREENS */
@media screen and (max-width:1024px) {
    .cursoBox{
        height: 170px;
        grid-template-rows: 10px 150px 10px;
        grid-template-columns:  100%;
        grid-template-areas:  " ." 
                              " curso"
                              " .";
    }
    .curso {
        grid-template-rows: 68px  32px  25px  25px;
        grid-template-columns: 8px  135px   1fr       8px;
        grid-template-areas: " .    imagen  tema      ."
                             " .    imagen  facilita  ."
                             " .    imagen  horario   ."
                             " .    imagen  lugar     .";
    }
    .tema {
        font-size: 21px;
    }
    .horario {
        font-size: 17px;
        letter-spacing: 0px;
    }
    .facilita {
        font-size: 17px;
        letter-spacing: 0px;
    }
    .lugar {
        font-size: 17px;
        letter-spacing: 0px;
    }
    .tituloCursos {
        font-size: 30px;
        color:#EEE;
        margin-top: 10px;
        margin-bottom: 5px;
    }
}