h1 {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

.box {
  width: 100px;
  border: 1px solid red;
}

.box img {
  width: 300px;
}

#log {
  width: 100%;
}

picture img {
  width: 400px;
  padding-left: 20px;
  padding-right: 20px;
}

picture:not(:first-of-type) img {
  padding-top: 20px;
}

img {
  /* border: 1px solid red; */
  display: block;
  /* margin: 1rem auto 0 auto; */
  /* width: 50vw; */
  /* width: 400px; */
  /* max-width: 80px; */
  /* height: 1440px; */
}

.images {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* grid-auto-rows: 80px; */
  /* grid-template-rows: auto; */
}

.image_list {
  scroll-snap-type: y mandatory;
}

.image_display {
  scroll-snap-align: start;

  margin-top: 2vw;
  margin-left: auto;
  margin-right: auto;
  max-width: 120vh;
  max-height: 98vh;

  border: 1px solid #ddd;
  border-radius: 4px;
  /* padding: 1rem; */
  overflow: hidden;

  /* box-shadow: 10px 5px 5px hsla(0, 0%, 91%, 0.774); */

  background-color: hsl(206, 100%, 99%);
  color: hsl(0, 0%, 50%);

  text-align: center;
  font-size: 0.9rem;
}

.image_display h3 {
  /* border: 1px solid red; */
  color: hsl(0, 0%, 30%);
  margin: 0.5rem 0 0;
  /* font-style: italic; */
  font-size: 1.1rem;
  font-weight: 500;
}

.image_display p.datetime {
  /* border: 1px solid red; */
}

.image_display > img {
  /* border: 1px solid green; */
  display: inline-block;
  max-width: 95%;
  max-height: 80vh;
  border-radius: 2px;
  margin-top: 1.5rem;
}

.image_display p.description {
  /* border: 1px solid red; */
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  color: hsl(0, 0%, 30%);
  margin-top: 0.3rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.4rem;
  max-width: 70%;
}

.image_display .tags {
  display: inline-block;
  align-self: center;
  /* border: 1px solid red; */
  width: 80%;
}

.image_display span {
  /* border: 1px solid red; */

  font-size: 0.8em;
  font-style: italic;
  color: hsl(0, 0%, 45%);
  /* padding: 0.4rem; */
}

.image_display span:not(:first-of-type)::before {
  /* content: " ♦ "; */
  content: ", ";
  color: hsl(0, 0%, 45%);
}