.container{
    display: grid;
    grid-template-areas:
        "icon header"
        "menu content"
        "footer footer";
    grid-template-columns: 1fr 5fr;
    gap: 5px;
    background-color: transparent;
    padding: 5px;
}

.container > div{
    padding:10px;
}

.container > div.icon{
    grid-area: icon;
    aspect-ratio: 1/1;
    background-color: transparent;
}

.container > div.header{
    grid-area: header;
    padding:0px;
    text-align: center;
}

.container > div.menu{
    grid: menu;
    text-align: center;
}

.container > div.content{
    grid-area: content;
    padding:10px;
}

.container > div.footer{
    grid-area: footer;
    text-align: center;
}

/* gallery grid */

.gallery{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 5px;
}

.gallery > div.imgFrame{
    position: relative;
    width: 100%;
    padding:5px;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.imgFrame > img{
    height: 100%;
}