.photo-card {
  background-color:#2d3638;
  border-radius:10px;
  box-shadow:0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}

@media screen and (min-width: 700px) {
  .photo-card {
    flex-direction:row;
  }
}

.photo-background {
  background-position:center;
  background-size:cover;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  min-height:250px;
}

@media screen and (min-width: 700px) {
  .photo-background {
    border-top-left-radius:10px;
    border-top-right-radius:0;
    border-bottom-left-radius:10px;
    min-height:none;
    width:50%;
  }
}

.photo-details {
  padding:2.1875em 5%;
}

@media screen and (min-width: 700px) {
  .photo-details {
    width:50%;
  }
}

.photo-details h1, .photo-details h4 {
  color:#fff;
  font-weight:500;
  margin:0;
}

.photo-details h1 {
  font-size:125%;
  line-height:1;
  margin-bottom:0.35em;
}

.photo-tags ul {
  list-style-type:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  font-size:87.5%;
  margin-top:0.35em;
  text-transform:lowercase;
}

.photo-tags li {
  margin:0 0.35em 0.35em 0;
}

.photo-tags a {
  background-color:#191e20;
  border-radius:50px;
  color:#fff;
  display:block;
  padding:0.3125em 1.25em;
  text-decoration:none;
  transition:color 0.3s ease;
}

.photo-tags a:hover, .photo-tags a:focus {
  color:#e37544;
}

.photo-details p {
  color:white;
}