.photo-detail-page {
  padding-top: 40px;
}

.photo-detail__list {
  margin: -10px -10px 50px;
  display: flex;
  flex-wrap: wrap;
}

.photo-detail__item {
  width: calc(25% - 20px);
  text-decoration: none;
  margin: 10px;
  cursor: pointer;
}

.photo-detail__item:hover .photo-detail__image img {
  transform: scale(1.075);
  filter: grayscale(1);
}

.photo-detail__image-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-top: 69.8%;
  overflow: hidden;
}

.photo-detail__image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.photo-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease-out, filter 0.25s ease-in-out,
    -webkit-transform 0.35s ease-out, -webkit-filter 0.25s ease-in-out;
}

@media screen and (max-width: 1200px) {
  .container {
    padding: 0 30px;
  }

  .photo-detail-list {
    margin: -10px -10px 30px;
  }

  .photo-detail__item {
    width: calc(33.33% - 20px);
  }
}

@media screen and (max-width: 768px) {
  .photo-detail__item {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 576px) {
  .container {
    padding: 0 20px;
  }

  .photo-detail__list {
    margin: -10px 0 20px;
  }

  .photo-detail__item {
    width: 100%;
    margin: 10px 0 10px;
  }
}