#main-content-photo {
  margin: 16px 16px;
  margin-left: 30%;
  margin-right: 20%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#photo-grid {
  /* margin: 70px 12vw; */
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

.row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.row img {
  width: 20%;
  height: auto;
  margin: 8px;
  background-color: white;
}

.hidden {
  display: none;
}

#photo-archive {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

.archive-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.archive-row img {
  width: 100%;
  height: auto;
  background-color: white;
}

.archive-row img + img {
  margin-left: 8px;
}

.archive-row + .archive-row {
  margin-top: 8px;
}

/* Extra Extra large devices (large laptops and desktops, 1200px and below) */
@media only screen and (max-width: 1600px) {
  #photo-grid {
    /* margin: 70px 175px; */
    /* margin-left: 30%; */
  }
}

/* Large devices (laptops/desktops, 1000px and below) */
@media only screen and (max-width: 1100px) {
  #photo-grid {
    /* margin: 70px 100px; */
    /* margin-left: 30%; */
    margin-right: 16px;
  }
  #main-content-photo {
    margin-right: 16px;
  }
}
  
/* Small devices (portrait tablets and large phones, 800px and below) */
@media only screen and (max-width: 800px) {
  #photo-grid {
    /* margin: 70px 50px; */
    /* margin-left: 30%; */
  }
  #main-content-photo {
    margin-right: 16px;
  }
}
  
/* Small devices (portrait tablets and large phones, 600px and below) */
@media only screen and (max-width: 650px) {
  #main-content-photo {
    margin: 16px 16px;
  }

  .row img {
    margin: 6px;
  }
}