.media-grid {
  @include list-unstyled;
  @include make-row;

  li {
    position: relative;
    width: 100%;

    padding-right: $grid-gutter-width / 2;
    padding-left: $grid-gutter-width / 2;

    @include make-col(6);

    @include media-breakpoint-up(md) {
      @include make-col(4);
    }

    @include media-breakpoint-up(xl) {
      @include make-col(3);
    }

    margin-bottom: 20px;
  }

  figure {
    margin: 0;

    @include aspect-ratio(4 / 3);

    background: #eee;
    overflow: hidden;

    display: flex;
    align-items: center;

    img {
      @include fill-area;
      object-fit: contain;
    }
  }

  figure.fill {
    img {
      object-fit: cover;
    }
  }

  figure.zoom {
    img {
      transition: transform 250ms;
    }

    &:hover img {
      transform: scale(1.05);
    }
  }

  a {
    cursor: zoom-in;
  }
}

.media-grid-sm {
  li {
    @include make-col(4);

    @include media-breakpoint-up(md) {
      @include make-col(3);
    }

    @include media-breakpoint-up(lg) {
      @include make-col(2);
    }
  }
}

.media-grid-lg {
  li {
    @include make-col(12);

    @include media-breakpoint-up(sm) {
      @include make-col(6);
    }

    @include media-breakpoint-up(lg) {
      @include make-col(4);
    }
  }
}

@include media-breakpoint-down(sm) {
  .media-grid {
    margin-left: -5px;
    margin-right: -5px;

    li {
      padding-left: 5px;
      padding-right: 5px;

      margin-bottom: 10px;
    }
  }
}