.left-area{
    grid-area: left-area;
}

.right-area{
    grid-area: right-area;
}

.body-area{
    display: grid;
    grid-template-columns: auto 5px auto;
    grid-template-rows: auto;
    grid-template-areas: 
    "left-area . ."
    "right-area . .";
}

.right-area{
    display: flex;
    flex-direction: column;
}

.right-area iframe{
    margin-bottom: 20px;
    border: 3px;
}
.conferencia-semestral{
    background-color: darkseagreen;
}
.conferencia-sabado{
    grid-area: conferencia-sabado;
}

.conferencia-domingo{
    grid-area: conferencia-domingo;
}
.linea{
    grid-area: linea;
}

.linea{
    color: black;
}

.conferencia-domingo{
    margin: 1rem;
}
.conferencia-sabado{
    margin:1rem;
}

.conferencia-semestral{
    display:grid;
    grid-template-columns: auto 10% auto;
    grid-template-rows: auto;
    grid-template-areas: 
    "conferencia-sabado linea conferencia-domingo";
}

.lista-temas{
    background-color: #468891;
    margin-bottom: 30px;
    padding: 5px;
    color: white;
}

a {
    background-color: black;
    color: white;
}

.class-cal-socsoc{
    width: 90%;
    height: 300px;
    border: 2px solid #f40;
    padding: 15px;
}

.cards{
    margin-top: 20px;
    margin-bottom: 20px;
}

.right-area-cal{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows:repeat(auto-fit, minmax(400px));
    margin-bottom: 20px;
}
.right-area-cal{
    margin-top: 20px;
}

@media screen and (min-width:900px){
    .body-area{
        display: grid;
        grid-template-columns: auto 25px 40%;
        grid-template-rows: auto;
        grid-template-areas: 
        "left-area . right-area";
    
    }
}