body {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 10% 90%;
    grid-template-areas: 
      "header" 
      "main";
      
    height: 100%;
    width: 100%;
}

header {
    display: grid;
    height: auto;
    width: auto;
    max-height: 80%;
    min-height: 2.5em;
}

main {
    display: grid;
    height: auto;
    width: 100%;
    padding: 1.0em;
}

.main {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: repeat(3, 33.33333%);
    background: yellow;
    height: 100%;
    width: 100%;
}

.store {
    display: flex;
    /*position: relative;
    grid-template-columns: auto;
    grid-template-rows: auto;*/
    background: grey;
    border: .3em solid black;
    padding: 1.0em;
    height: 100%;
    max-width: 100%;
}

figure {
    display: grid;
    padding: .1em;
    flex-direction: column;
    grid-template-columns: auto;
    grid-template-rows: 70% 14% 16%;
    justify-content: space-between;
    margin: 0.0em auto;
    height: auto;
    max-width: 100%;
    border: .3em solid red;
    row-gap: .1em;
}

figure img, figcaption, button {
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0.0em auto;
    object-fit: contain;
}

figcaption {
    display: flex;
    font-size: 1.0em;
    margin: 0.0em auto;
    object-fit: contain;
    margin-top: 0.5em; 
    margin-bottom: 0.5em;
}

button {
    display: flex;
    justify-content: center;
    text-align: center;
    object-fit: contain;
}