#cards{
  display: grid;
  /*grid-template-columns: repeat(3, 1fr);*/
  gap: 1.44rem;
}

#cards a{
  border: 2px solid whitesmoke;
  border-radius: 1rem;
  overflow: hidden;
}

#cards image{
  /*opacity: .5;*/
  aspect-ratio: 9/16;
  object-fit: cover;
  object-position: center center;
  transition: 0.25s;
}

#cards figure{
  position: relative;
}

#cards section{
  padding: 0 0.5rem 0.25rem; 
}

#cards .over{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#cards a:hover .over{
opacity: 1;
}

@media screen and (min-width:600px) {
  #cards{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width:1200px) {
  #cards{
    grid-template-columns: repeat(3, 1fr);
  }
}