.flexgrid {
  grid-column: 1 / 9;
  grid-row: 4;
  width: 100%;
  margin: 20px auto;
  columns: 4;
  column-gap: 20px;
  padding-left: calc(1rem + 2vw);
  padding-right: calc(1rem + 2vw);
  columns: 3;
}

.flexgrid .box {
  width: 100%;
  margin-bottom: 10px;
  break-inside: avoid;
  overflow: hidden; /* Removing this will break the effects */
}

.flexgrid .box img {
  max-width: 100%;
  border-radius: 15px;
}

.box img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.box img {
  transition: transform 1.5s ease;
}

.box:hover img {
  transform: scale(
    1.2
  ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

@media (max-width: 00px) {
  .flexgrid {
    width: calc(100% - 40px);
    columns: 3;
  }
}

@media (max-width: 768px) {
  .flexgrid {
    columns: 2;
  }
}

@media (max-width: 480px) {
  .flexgrid {
    columns: 1;
  }
}