.myphoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  margin: 1rem;
}

.myphoto img {
  max-width: 100%;
  max-height: 85vh;
  margin: auto;
  /*  */
  background-color: var(--border-color);
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  align-content: center;
}

.title a {
  color: var(--text-color);
  text-decoration: none;
}

.title a:hover {
  color: var(--inverted-text-color);
  background-color: var(--inverted-background-color);
}

.subtitle a {
  color: var(--text-color);
  text-decoration: none;
}

.subtitle-text:hover,
.subtitle-text:hover del {
  color: var(--inverted-text-color);
  background-color: var(--inverted-background-color);
}

figcaption {
  padding: 0.5em;
  text-align: center;
  padding-bottom: 2em;
  color: var(--text-color);
}

@media only screen and (min-width: 1368px) {
  .myphoto {
    /* padding: 0em 6em 0em 6em; */
  }
}

@media only screen and (max-width: 1367.99px) {
  .myphoto {
    /* padding: 0em 4em 0em 4em; */
  }
}

@media only screen and (max-width: 992px) {
  .myphoto {
    margin: 1rem 1rem 1rem 0rem;
    padding: 1rem 1rem 1rem 0rem;
  }
}

@media only screen and (max-width: 576px) {
  .myphoto {
    margin: 1rem 1rem 1rem 0rem;
    padding: 1rem 1rem 1rem 0rem;
  }
}

/* Photo list grid */

.photo-card {
  background-color: white;
  /* background-color: var(--border-color);*/
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  align-content: center;
  max-width: 500px;
  max-height: 300px;
  flex-flow: row;
}

.photo-card img {
  max-width: 500px;
  max-height: 300px;
  background-color: white;
}

.photo-cards {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}