body {
  margin: 0.75rem;
  font-family: sans-serif;
  background-color: white;
  color: #212121;
}

.header, .photo-grid {
  width: 65%;
  margin: 0 auto;
}

hr {
  border: 1px solid #e9e9e9;
  margin: 1rem 0 1.5rem 0;
}

.header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.header-left, .header-right {
  margin: 0;
}

.header-right a {
  color: #41a6b7;
  text-decoration: none;
}

@media (min-width: 700px) {
  .header-row {
    flex-direction: row;
    align-items: center;
  }
  .header-left {
    text-align: left;
    flex: 1;
  }
  .header-right {
    text-align: right;
    flex: 1;
  }
}

.photo-grid {
  column-count: 1;
  column-gap: 10px;
}

.photo-grid img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  border-radius: 4px;
  break-inside: avoid;
}

@media (min-width: 700px) {
  .photo-grid {
    column-count: 2;
  }
}

@media (max-width: 700px) {
  .header, .photo-grid {
    width: 100%;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #212121;
    color: white;
  }
  hr {
    border-color: #4e4e4e;
  }
}