body {
  width: 105vw;
    font-family: Arial, sans-serif;
    background-color: slategrey;
    background-image: linear-gradient(to bottom right, white, lightblue);
}
#wrapper{
width: 100vw;
min-height: 100vh;
/* padding: 0 10px 0 0; */
margin-top: -8px;
margin-left: -8px;

}

.panel{

  /* margin: 10px; */
  padding: 5px;
  /* background-color: bisque;
  border: 3px solid slateblue; */
}

#container{  
    width: 98%;
    display: flex;
    flex-direction: column;
    margin:auto;
}
#buttonPanel{
    grid-column: 1;
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    margin: 0 0 5px 0;
    /* background-color: cornflowerblue; */
}
.flexRow{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    margin:5px;
    /* background-color: cornflowerblue; */
}

.btnBlock{
    /* background-color: antiquewhite; */
    justify-content: space-between;
    margin: auto;
    padding:0 10px;
    width: 30vw;
}
.panelbtn{
    width: 20vw;
    /* height: 40px;  */
    text-align: center;
    display:block;
    background-color: #f4f4f4;
    border: 2px solid slateblue;
    border-radius: 12px;
    font: 1em sans-serif;
    line-height: 2em;
    margin: auto;
    padding: 3px 30px;
    cursor: pointer;
    box-shadow: 10px 10px 10px darkslategrey;
}
  .tile {
    display: block;
    width: 7vw;
    height: 7vw;
    position: relative;
    z-index: 5;
    background-color: #f4f4f4;
    border: 2px solid slateblue;
    border-radius: 10px;
    box-shadow: 10px 10px 10px darkslategrey;
    margin: 5px;
  }
  img {
    object-fit: contain;
    width: 7vw;
    height: 7vw;
    border-radius: 8px;
  }
.infoBlock {
  width: 90vw;
    display: flex;
    flex-direction: column;
    text-align: center;
    /* background-color: teal; */
    /* list-style: none; */
    /* padding: 15px 25px ;
    background-color: #f4f4f4;
    border: 3px solid slateblue;
    border-radius: 15px; */
    font: 1em sans-serif;
    line-height: 15px;
    margin: auto;
    cursor: pointer;
    /* box-shadow: 10px 10px 10px darkslategrey; */
}
@media screen and (max-width: 1250px) {
    #container {   
      flex-direction: column;
    }
    #gridContainer {   
        flex-direction: column;
        margin: auto;
      }
    #buttonPanel {   
        flex-direction: row;
  
      }
    .btnBlock {
        flex-direction: row;
        margin: auto;
        padding: 0 ; 
        width: 30vw;
    }

  }

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


    .imageItem {
        width: 26vw;
        height: 26vw;
        /* margin: 1vw; */
      }

    #btnBlock03 {
      display: none;
      }
    .panelbtn{
      width: 30vw;
      min-width:100px;
      /* margin: 5px; */
      overflow: hidden;
      font-size: 1em;
    }
    /* .infoBlock {
    margin: 5px;
} */
    .btnBlock{

    width: 40vw;
  }
}    
    @media screen and (max-width: 400px) {
        #container{  
            margin:0;
        }
        .imageItem {
            width: 24vw;
            height: 24vw;
            /* margin: 1vw; */
          }

    }