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

.gallery {
  margin-top: 30px;
  width: 96%; 
  margin-left: auto; 
  margin-right: auto; 
  padding-bottom: 20px;
}
  
ul.gallery {
  --numcolumns: 3;
  --gap: 3em;
  --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: 100%;
  gap: 20px;;
}

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

.card {
  scroll-ansp-align: start;
  flex: 0 0 20em; 
  background-color: #ffffff;
  padding: 0 0 39px 0;
  border-radius: .5em;
  text-align: center;
  align-content: center;
  border-radius: 20px;
  border: none;
}

.card-gallery {
  scroll-ansp-align: start;
  flex: 0 0 20em;
  margin-top: 1em;
  background-color: #ffffff;
  padding: 0 0 20px 0;
  border-radius: .5em;
  text-align: center;
  align-content: center;
  border-radius: 20px;
}

@media screen and (max-width: 800px) {
ul.gallery {
  --numcolumns: 2;  
}

}

@media screen and (max-width: 600px) {
ul.gallery {
  --numcolumns: 1; 
    --gap: 1em;
}

}