body {
  background-color: black;
}
body .container {
  margin: 10px;
}
body .container #slides {
  padding: 10px;
  border: 1px solid #555;
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  justify-content: space-evenly;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
}
body .container #slides.full {
  grid-template-columns: auto;
}
body .container #slides img {
  display: block;
  border: 4px solid #222;
  max-width: 80%;
  border-radius: 5px;
  cursor: pointer;
  object-fit: contain;
  aspect-ratio: 1;
}
body .container #slides img.spanned {
  max-width: 100%;
}
body .container #slides img:hover {
  opacity: 0.8;
}