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

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

.body-area{
    margin-left: 0;
}

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

.left-area{
   padding: 1rem; 
}
.right-area, .left-area{
    display: flex;
    flex-direction: column;
}

.right-area iframe{
    margin-bottom: 20px;
    border: 3px;
}
.conferencia-semestral{
    background-color: rgb(243, 36, 8);
    color: beige;
}
.conferencia-sabado{
    grid-area: conferencia-sabado;
}

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

.linea{
    color: black;
}

.conferencia-domingo{
    margin: .5%;
}
.conferencia-sabado{
    margin: .5%;
}

.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;
}

.card{
    align-items: center;
}
.right-area-cal{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows:repeat(auto-fit, auto-fit);
    
    margin-bottom: 20px;
}

.right-area p{
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}
.right-area-cal{
    margin-top: 20px;
}

.left-area h1,.left-area p{
    text-align: center;

}

.left-area h3{
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

.conferencia-sabado h4, .conferencia-domingo h4, 
.right-area-cal p, .lista-temas p{
    text-align: center;
}
@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";
    
    }
    .left-area{
        padding: 3rem; 
     }
}