.flexgrid {
  grid-column: 1 / 9;
  grid-row: 4;
  grid-row-gap: 1rem;
  width: 100%;
  padding-left: calc(1rem + 2vw);
  padding-right: calc(1rem + 2vw);
  columns: 3;
  align-items: start;
  align-content: start;
}

.flexgrid .box {
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden; /* Removing this will break the effects */
}

.flexgrid .box img {
  max-width: 100%;
}

.box img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.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: 768px) {
  .flexgrid {
    columns: 2;
  }
}

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