* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: #e8e4d9;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
main { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 48px; }
header { text-align: center; margin-bottom: 28px; }
header a { color: #7a1d25; }
h1 { margin: 8px 0; font-family: Georgia, "Times New Roman", serif; font-weight: normal; }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.photo {
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: 8px;
  background: #fff;
  border: 1px solid #c8c2b5;
  box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
}
.photo:hover, .photo:focus-visible { outline: 3px solid #8ec2ce; outline-offset: 2px; }
.photo img { display: block; max-width: 100%; max-height: 96px; width: auto; height: auto; }
@media (max-width: 480px) {
  main { width: min(100% - 20px, 1100px); padding-top: 20px; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .photo { min-height: 92px; padding: 5px; }
  .photo img { max-height: 80px; }
}