.demo-list .figure-wrap {
  position: relative;
  z-index: 1;
}

.demo-list .figure-wrap,
.demo-list .figure-wrap img {
  // Promote to its own layer. makes filters look ok on retina with images
  transform: translateZ(0);
  transition: .1s ease;
}

.demo-list:hover .figure-wrap {
  transform: scale3d( 1, 1, 1 );

  img {

    filter: grayscale(1);
  }
}

.demo-list:hover .figure-wrap:hover {
  z-index: 2;
  transform: scale3d( 1.05, 1.05, 1 );

  img {
    filter: none;
  }
}

.demo-list .figure-wrap:nth-child(4n + 1) {
  margin-left: 0;
}

.demo-list .figure-wrap > a {
  display: block;
}

.demo-list .figure-wrap figcaption {
  height: 2em;
  margin-top: .5em;
  margin-bottom: 1em;
}


.demo-link-container::before {
  content: '➜';
  color: $emerald;
  margin-right: 5px;
}


span.demo-link-container::before {
  margin-left: 5px;
}

@media screen and (max-width: 47.9375em) {

  .demo-list + .demo-list {
    margin-top: 1em;
  }

  .figure-wrap:nth-child(odd) {
    margin-left: 0;
  }

  .figure-wrap:nth-child(n + 3) {
    margin-top: 1em;
  }
}