@charset "UTF-8";
/**
needs bootstrap function str-replace()
 */
/**
* Метод дополняет svg-sprite.scss.
* Позволяет получить чистый урл элемента спрайта для использования в псевдоэлементах или background-image
* Example: content: url(get-svg-url('checkmark', $user-variables: (fill: 'tomato')));
* Example: background-image: url(get-svg-url('heart', $user-variables: (stroke: 'red', fill: 'pink')));
*/
/**
вертикальные отступы
для каждого цвета указываются в порядке как в $grid-breakpoints
 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas: "first second" "first third";
  height: 210px;
}
@media (min-width: 400px) {
  .photo-grid {
    height: 270px;
  }
}
@media (min-width: 576px) {
  .photo-grid {
    height: 380px;
  }
}
@media (min-width: 768px) {
  .photo-grid {
    height: 250px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas: "first second third";
  }
}
@media (min-width: 992px) {
  .photo-grid {
    height: 330px;
  }
}
@media (min-width: 1200px) {
  .photo-grid {
    height: 400px;
  }
}
@media (min-width: 1600px) {
  .photo-grid {
    height: 640px;
  }
}
.photo-grid__item {
  cursor: pointer;
  transition: filter 300ms;
}
@media (min-width: 992px) {
  .photo-grid__item {
    filter: grayscale(1);
  }
  .photo-grid__item:hover {
    filter: grayscale(0);
  }
}
.photo-grid__item--0 {
  grid-area: first;
}
.photo-grid__item--1 {
  grid-area: second;
}
.photo-grid__item--2 {
  grid-area: third;
}
.photo-grid__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}