.container{
    display: grid;
    /* grid template: filas / columnas; */
    grid-template: 35vw 53vw 35vw 35vw / 98vh 98vh;
    grid-template-areas: "disciplinas   disciplinas"
                         "sedes         sedes"
                         "instructores  competidores"
                         "merch         merch";  
    
    grid-gap: 2px;
    height: 100vh;
    width: 100vw;

    margin-left: 0px;
    margin-right: 0px;
}


.disciplinas{
    grid-area: disciplinas;

    background-image: url(/img/disciplinas2.png) ;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sedes{
    grid-area: sedes;

    background-image: url(/img/sedes1.png);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.instructores{
    grid-area: instructores;

    background-image: url(/img/Instructores.png);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.competidores{
    grid-area: competidores;

    background-image: url(/img/peleadores2.jpeg);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.merch{
    grid-area: merch;
    background-image: url(/img/merch.png);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.item{
    padding: 1px;
    color: white;
    font-family: 'rubik dirt';
    font-size: 2em;
}

.item a{
    display: flex;
    justify-content: center;
    align-items: center;

    
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 3em;
    padding-left: 1em;
    padding-right: 1em;

    border-radius: 10px;
}

.disciplinas a{
    font-size: 2.2em;
    padding: 1.5em;
}

.sedes a{
    display: flex;
    flex-direction: column;
    
    justify-content: center;
    align-items: center;

    gap: 1em;

}

.sedes img{
    width: 90%;
}

.sedes a .glowon{
    filter: drop-shadow(0px 0px 40px rgb(255, 255, 255));
}

.instructores a{
    align-items: start;
    font-size: 1.5em;
    padding-left: 1.6em;
    padding-top: .3em;
    padding-bottom: 5.6em;
}

.competidores a{
    font-size: 1.5em;
    padding-top: 4.8em;
    padding-bottom: 1.5em;
}

.merch a{
    font-size: 1.5em;
    padding-top: em;
}

/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/


@media (max-width:800px){

    .container{
        display: grid;
        /* grid template: filas / columnas; */
        grid-template: 20% 35% 20% 25% / 50% 50%;
        grid-template-areas: "disciplinas   disciplinas"
                             "sedes         sedes"
                             "instructores  competidores"
                             "merch         merch";  

        margin-left: 0px;
        margin-right: 0px;
    }

    .disciplinas{
        background-size: cover;
    }
    
    .sedes{
        background-size: cover;
    }
    
    .instructores{
        background-size: cover;
    }
    
    .competidores{
        background-size: cover;
    }
        
    .item a{
        font-size: 1.2em;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 2px;
    }

    .disciplinas a{
        font-size: .9em;
    }

    .merch a{
        font-size: .8em;
    }

    .sedes a{
        padding-top: 1em;
        gap: 1em;
        font-size: 1em;
    }

    .sedes img{
        width: 90%;
    }

    .instructores a{
        font-size: .6em;
    }

    .competidores a{
        font-size: .6em;
        padding-top: 6em;
    }

    .glowon{
        filter: drop-shadow(0px 0px 40px rgb(0, 0, 0));
    }
    
    .sedes .glowon{
        filter: drop-shadow(0px 0px 40px rgba(255, 255, 255, 0.519));
    }
}