// Polaroid
//
// Module class for styling a figure with a "polaroid" effect.
//
// Markup:
//   <figure class="polaroid">
//     <img src="/styleguide/assets/placeholder.jpg" alt="another kitten">
//   </figure>
//
// Styleguide Polaroid
.polaroid {
  padding: 0;
  position: relative;

  @include media($tablet) {
    width: 180px;
    height: 210px;
    transform: rotate(-3deg);

    &:after {
      background-image: neue-asset-url("images/polaroid-frame.png");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 170px;
      content: "";
      height: 210px;
      left: 0;
      position: absolute;
      top: 0;
      width: 180px;
    }
  }


  img {
    display: block;
    margin: 0 auto;
    position: relative;

    @include media($tablet) {
      max-width: 160px;
      top: 13px;
      left: 10px;
      margin: 0;
    }
  }
}