.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.gallery-item {
  margin: 10px;
  width: 85px;
}

div.gallery-item:hover {
    transform: scale(1.15);
    transition-timing-function: ease-in;
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

div.gallery-item .desc {
  padding: 5px;
  text-align: center;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 2;}
  .content {grid-area: 2 / span 4;}
  .footer {grid-area: 3 / span 6;}
}

@media (max-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 6;}
  .content {grid-area: 3 / span 6;}
  .footer {grid-area: 4 / span 6;}
}
.flex-container {
      display: flex;
      /* Optional: You can further control alignment and spacing */
      justify-content: center; /* Distributes space around items */
      align-items: center;
      flex-flow: row wrap;
}