main {
    flex-wrap: wrap;
    justify-content: center;
}

main img {
    margin: auto;
}

.title {
    margin-top: 6vmin;
    margin-bottom: 4vmin;
    width: 100%;
}

#recuadro, .recuadro {
    background: rgb(235, 235, 235);
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.recuadro {
    display: none;
}

#open img {
    margin-top: 0vmin;
    height: 120px;
}
#close img {
    margin-top: 6vmin;
    height: 120px;
}

#titles {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 2vmin;
}
#open {
    display: flex;
    width: 100%;
    justify-content: center;
}
#close {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 3vmin;
}
.group1 {
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.group2 {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.group3 {
    width: 31%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.group4 {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-aspect-ratio: 4/3) {

    html {
        overflow: auto;
    }
    body {
        padding-top: 15vmin;
        overflow: auto;
    }    #recuadro {
        display: none;
    }
    .recuadro {
        display: flex;
    }
    .recuadro:not(first-child) {
        margin-top: 6vmin;
    }

}