body {
  background-color: #303132;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

#name {
  font-family: Verdana, sans-serif;
  text-align: left;
  color: GhostWhite;
  text-shadow: 1px 1px 2px black;
}

#description {
  font-family: Verdana, sans-serif;
  text-align: center;
  color: GhostWhite;
  text-shadow: 1px 1px 2px black;
}

.previews {
  display: grid;
  grid-auto-rows: 116px;
  grid-template-columns: repeat(auto-fill, 116px);
  min-width: 116px;
  max-width: 464px;
  margin: auto;
  padding: 20px;
  background-color: rgb(163, 59, 59);
  border: 1px solid #7f1b1b;
}

@media (max-width: 505px) {
  .previews {
    max-width: 348px;
  }
}

@media (max-width: 389px) {
  .previews {
    max-width: 232px;
  }
}

@media (max-width: 273px) {
  .previews {
    max-width: 116px;
  }
}

.preview {
  width: 116px;
  height: 116px;
  user-select: none;
}

@media (pointer: fine) {
  .preview:hover:not(:active) {
    box-shadow: -1px -1px #7f1b1b inset, 1px 1px #c76767 inset;
  }
}

.preview:active {
  background-color: #c76767;
  box-shadow: 1px 1px #7f1b1b inset;
}