grid.css

main{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "section section aside"
}

.contenedor{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "header header header"
                        "main main main"
                        "footer footer footer";
}

main{
    grid-area: main;
}

header{
    grid-area: header;
}
section{
    grid-area: section;
}

aside{
    grid-area: aside;
}

footer{
    grid-area: footer;
}


@media screen and (max-width:1280px){
    html{
        font-size: 13px;
    }

    @media screen and (max-height:390px) {
        @media screen and (min-width: 850px) {
            html{
             font-size: 11px;
            }
            .principal{
                 max-height: 100vh;
             }
            .aside{
               height: 95vh;
          }
        }
    }


    @media screen and (min-width: 850px) {

        @media  screen and (max-height:850px) {
            html{
                font-size: 11px;
            }
            .principal{
                max-height: 100vh;
            }
            .aside{
                height: 95vh;
            }

        }
        
    }

}

@media screen and (max-width:800px){

    main{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "section section section"
                             "aside aside aside";

    }

    .seccion-principal{
        height: 30rem;
    }

    .aside{
        display: flex;
        align-items: center;
        height: 30rem;
        padding-bottom: 4rem;
    }

    .munieco-contenedor{
        width: 95%;
    }
    .texto-atras{
        margin: 0 auto;
    }
    .imagen-aside{
        visibility: hidden;
    }
    .btn-copiar{
        margin: 0;
    }
}