.main {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 80px auto 80px;
  grid-template-areas:
    "m h h h h h h h h h h h"
    "m c c c c c c c c c c c"
    "f f f f f f f f f f f f";

}

.header {
  grid-area: h;
  background-color: #4dc9ea;
  justify-content: center;
}

.menu {
  grid-area: m;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: #0d499f;
}

.side-bar{
  padding: 20px 10px;
}

.content {
  grid-area: c;
}

.images{
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  grid-auto-rows: 125px;
  grid-auto-flow: dense;
}

.images > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.images > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wide-bears {
    grid-column: span 2;
}

.tall-bears {
  grid-row: span 2;
}

.big-bears {
  grid-column: span 2;
  grid-row: span 2;
}

.footer {
  grid-area: f;
  background-color: #172451;
  justify-content: space-evenly;
}

.main > div {
  display: flex;
  align-items: center;
}

html, body {
  margin: 8px 5px;
  background-color: #f5f5f5;

}

.gabi-big{
  justify-content: center;
}

.gabi-small{
  display: none;
}

.gabi-med{
  display: none
}

.little-foot{
  display: none;
}


@media screen and (max-width: 775px) {
  .gabi-big{
    display: none
  }
  .gabi-med{
    display: flex;
    justify-content: center;
  }
  .gabi-small{
    display: none
  }
  .big-foot{
    display: none;
  }
  .little-foot{
    display: flex;
    justify-content: flex-start;
  }

}

@media screen and (max-width: 600px) {
  .gabi-big{
    display: none
  }
  .gabi-med{
    display: none
  }
  .gabi-small{
    display: flex;
    justify-content: center;
  }
}