.reja {
    font-size: 1.7rem;
    margin: .1rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, 1fr);
    max-width: 100%;


}



.signo1 {
	grid-area: 4 / 1 / 5 / 2;
}

.num1 {
	grid-area: 3 / 2 / 4 / 3;
}

.linea1 {
	grid-area: 4 / 2 / 5 / 3;
}

.den1 {
	grid-area: 5 / 2 / 6 / 3;
}

.signo2 {
	grid-area: 4 / 3 / 5 / 4;
}

.num2 {
	grid-area: 3 / 4 / 4 / 5;
}

.linea2 {
	grid-area: 4 / 4 / 5 / 5;
}

.den2 {
	grid-area: 5 / 4 / 6 / 5;
}

.signo3 {
	grid-area: 4 / 5 / 5 / 6;
}

.num3 {
	grid-area: 3 / 6 / 4 / 7;
}

.linea3 {
	grid-area: 4 / 6 / 5 / 7;
}

.den3 {
	grid-area: 5 / 6 / 6 / 7;
}

.igual1 {
	grid-area: 4 / 7 / 5 / 8;
}

.linea4 {
	grid-area: 4 / 8 / 5 / 13;
}

.num4 {
	grid-area: 3 / 8/ 4 / 9;
}

.den4 {
	grid-area: 5 / 10 / 6 / 11;
}

.signo4 {
	grid-area: 3 / 9 / 4 / 10;
}

.num5 {
	grid-area: 3 / 10 / 4 / 11;
}

.signo5 {
	grid-area: 3 / 11 / 4 / 12;
	width: 3.5rem;
}

.num6 {
	grid-area: 3 / 12 / 4 / 13;
	
}

.igual2 {
	grid-area: 8 / 7 / 9 / 8;
}

.signo6 {
	grid-area: 8 / 8 / 9 / 9;
	width: 70%;
}

.linea5 {
	grid-area: 8 / 9 / 9 / 10;
}

.num7 {
	grid-area: 7 / 9 / 8 / 10;
}

.den5 {
	grid-area: 9 / 9 / 10 / 10;
}

.igual3 {
	grid-area: 11 / 7 / 12 / 8;
}

.final {
	grid-area: 11 / 8 / 12 / 9;
}

/* centramos texto*/

.reja div{
    text-align: center;

}
.boton{
    background-color: var(---secundario);
    color: var(---blanco);
    padding: 1rem 1rem;
    margin-top: 3rem;
    font-size: 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: .5rem;
   width: 100%;
    text-align: center;
    border: none;
}

@media (min-width: 768px) {
    .boton{
        width: auto;
    }
	.reja{
		margin-left: 10rem;
		margin-right: 10rem;
	}
}

.boton:hover{
    cursor: pointer;
}