<div id="instafetch"></div>
$font-body: 'Playfair Display', serif;

$color-white: #fff;
$color-gray: #e6e6e6;
$color-black: #000;

$mq-xs: 20em;
$mq-sm: 30em;
$mq-md: 54em;
$mq-lg: 64em;
$mq-xl: 76.5em;
$mq-xxl: 114em;

%flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

* {
  box-sizing: border-box;
}

body {
  @extend %flex-center;
  
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: 2em;

  font-family: $font-body;
  font-size: 100%;
  line-height: 1.8;
  color: $color-black;
  background-color: $color-gray;

  @media (min-width: $mq-xs) {
    font-size: 102.5%;
  }

  @media (min-width: $mq-sm) {
    font-size: 105%;
  }

  @media (min-width: $mq-md) {
    font-size: 107.5%;
  }

  @media (min-width: $mq-lg) {
    font-size: 110%;
  }

  @media (min-width: $mq-xl) {
    font-size: 115%;
  }

  @media (min-width: $mq-xxl) {
    font-size: 125%;
  }
}

#instafetch {
  
  a {
    position: relative;

    display: block;

    border: 1px solid transparent;
    box-shadow: 0 1px 1px rgba($color-black, 0.1);
    background-color: $color-white;
    background-clip: padding-box;
    text-decoration: none;
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    transition: all 1s ease;

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;

      height: 100%;
      width: 100%;

      background-clip: padding-box;
      box-shadow: 0 2px 50px rgba($color-black, 0.25);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    &:hover {
      border: 1px solid rgba($color-black, 0.1);
      box-shadow: 0px 0px 47px rgba($color-black, 0.1);
      transform: translate3d(0, -0.5em, 0);
      transition: all 1s ease;

      &:after {
        opacity: 1;
      }
    }
  }
  
  figure {
    margin: 0;
    padding: 0.5em;

    @media (min-width: $mq-sm) {
      padding: 1em;
    }
  }

  img {
    display: block;
    height: 640px;
    width: 640px;
    max-width: 100%;
  }

  div {
    padding: 0.5em 0 1em;

    color: $color-black;
    background: $color-white;
    
    @media (min-width: $mq-sm) {
      padding: 1em 0 2em;
    }
  }

  p {
    padding: 0;

    font-size: 1.25em;
    text-align: center;
  }
}
instafetch.init({
  accessToken: '3980752.1677ed0.62bb6a2ad3ef4dc0a6aad768ab8939ab',
  numOfPics: 1,
  caption: true
});

/*
 * https://codepen.io/thomasvaeth/post/instafetch-js
 */

External CSS

  1. https://fonts.googleapis.com/css?family=Playfair+Display

External JavaScript

  1. https://rawgit.com/thomasvaeth/instafetch.js/master/dist/instafetch.min.js