/**
 * Siple Gallery, V1
 *
 * V1: https://codepen.io/bramus/pen/pogLgwZ
 * V2: https://codepen.io/bramus/pen/abdjLBx
 * V3: https://codepen.io/bramus/pen/eYJjGgQ
 * V4: https://codepen.io/bramus/pen/GRoaXQJ
 */

* {
  box-sizing: border-box;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; 
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

ul.gallery {
  margin-top: 100px;
  --numcolumns: 6;
  --gap: 0.50em;
  --size: calc(100vw / var(--numcolumns));
  display: grid;
  grid-template-columns: repeat(var(--numcolumns), 1fr);
  
  grid-template-rows: auto;
  gap: var(--gap);
  /*align-items: stretch;*/
  background-color: none;
  
  list-style: none;
}

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

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