@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}

.plantilla{
    width: 100%;
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-gap:5px;
    grid-template-columns: auto;
    grid-template-rows: 350px 400px 1200px 5350px 1fr 1fr auto;    
    grid-template-areas: "cab"
                        "boton_prin"
                        "pre_central"
                        "principal"
                        "central_inf"
                        "pre_ft"
                        "pie_pag"; 
}

.cab{
    grid-template-columns: 1fr auto;
    grid-template-rows: 230px auto ;
    grid-template-areas: "hd_col1 hd_col2"
                         "mn_prin mn_prin";
} 

.principal{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
                        "anos"
                        "recientes"
                        "prox_event";
}

.prox_event{
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr ;
    grid-template-areas: "col1_pe col2_pe";
}

.central_inf{
    grid-template-columns: 1fr 1fr ;
    grid-template-rows: 100%;
    column-gap: 1em;
    grid-template-areas: "inf_izq inf_der";
}


.pie_pag {
    grid-template-columns: 25% 25% 25% auto;
    grid-template-rows: 1fr;
    grid-template-areas: "col1_ft col2_ft col3_ft col4_ft";
}

@media screen and (max-width: 480px){
    
.plantilla{
    width: 100%;
    max-width: 500px;
    margin: auto;
    display: grid;
    grid-gap:5px;
    grid-template-columns: 1fr;
    grid-template-rows: 600px 910px 2100px auto 1fr auto;    
    grid-template-areas: "cab"
                        "boton_prin"
                        "pre_central"
                        "principal"
                        "central_inf"
                        "pre_ft"
                        "pie_pag"; 
    }

.cab{
    grid-template-columns: 1fr;
    grid-template-rows: 150px 300px auto ;
    grid-template-areas: "hd_col2"
                         "hd_col1"
                         "mn_prin";
} 

.mn_prin {
	width:100%;
    height:auto;
    margin: auto;
    font-weight: 600;
    padding-top: 5px;
    color: #fff;
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    background-color: white;
    grid-area: mn_prin;
}

.boton_prin{
    font-size: 1.5rem;
}

.mn_btn{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.principal{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, fr);
    grid-gap:2em;
    grid-template-areas: 
                        "anos"
                        "recientes"
                        "prox_event";
}
.card {
    width: 80%;
    height: auto;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    margin-left: 2em;
    border-radius: 20px;
    margin-bottom: 1rem;
    padding: 1rem;
    padding-bottom: 1em;
    border-top: solid 5px rgb(80, 0, 0);
    border-bottom: solid 5px rgb(80, 0, 0);
    box-shadow: gray 5px 10px 10px 0px;
    overflow: hidden;
}

.prox_event{
    text-align: center;
    align-items: center;
    justify-content: center;
    grid-template-columns: auto;
    grid-template-rows: 10em 1fr;
    grid-template-areas: "col1_pe"
                         "col2_pe";
}


    .central_inf{
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "inf_izq"
                             "inf_der";
    }


.pie_pag {
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:  "col1_ft"
                          "col2_ft"
                          "col3_ft"
                          "col4_ft";
}


@media (min-width: 420px) {
    breakpoint{
    max-width: 100%;
    display: inline-block;
}
}


@media (min-width: 420px) {
    breakpoint {
        max-width: 48%;
    }
}
@media (min-width: 760px) {
    breakpoint {
        max-width: 44%;
    }
}