* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul.gallery {
  --numcolumns: 4;
  --gap: 0.25em;
  --size: calc(100vw / var(--numcolumns));
  display: grid;
  grid-template-columns: repeat(var(--numcolumns), 1fr);
  
  grid-template-rows: auto;
  gap: var(--gap);
  align-items: stretch;
  
  list-style: none;
}

ul.gallery > li {
  display: block;
  height: calc(var(--size) - var(--gap));
}

ul.gallery > li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ul.gallery > li img:hover {
    transform: rotate(360deg);
    transition: all 0.3s ease-in-out 0s;
}