Casper Takehome challenge

gistfile1.txt

https://docs.google.com/document/d/1uQ4Gm9GKta30jboySkCB-rhdtRImnuN57IJbzIiquFw/pub

Casper Coding Challenge
Below are the results when you google image search “penrose”. Your challenge is to re-create the following screenshot as a standalone HTML page (you may use any set of images you want):
https://lh6.googleusercontent.com/z06INIa9oIrBqkkdGNySuOxku3je2xO1bsf9pBpHwVsmRYSEcDQQJdvzAWNiHWLP0_UygUFFSfpvM3m-hCu2MnDUP4MWbuHJUbO8CNs8W80286szX-Et2vV_eCMjbPAlnw
You should pull down images via API from any image hosting service you want — we’ve included an example of pulling down from Flickr below. You may use jQuery or vanilla JS, but no other external libraries. (You could use coffeescript if you wanted, too!)
You can use plain CSS or SASS.  
You cannot alter the aspect ratio of any images, but you may crop them, or hide the edges, as you see fit.
The page should be fully responsive, and emulate the behavior of google images to an extent. Here is an example of a mobile search for “NYC”:
https://lh3.googleusercontent.com/8Yr4O3tiM-4rwfmjk4rgI-qniTHcoPiCeGZVuOrV6tWom4nTiwZk-pyl-cLM4O8FMQUJwJ5feR-kJARllgrCLTmr2_cSgrfwAWEFALLxPLkxm1b42XFE3mpUl8uFB0oKLw

Be creative — It does not need to be pixel-perfect to the examples above; if there’s a question we didn’t answer, make up your own solution.
Hints:
Your ‘layout’ js/css should work for initial page load as well as any resize.
Set a max number of images across for any given page width. I.e. 6 for desktop, 2 for mobile, and various points in between
Example Flicker API image loading:
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
 $.getJSON( flickerAPI, {
   tags: "mount rainier",
   tagmode: "any",
   format: "json"
 }, function(data) {
     $.each( data.items, function( i, item ) {
       // item.media.m gets the image URL
   });
BONUS:
Open up a light-box when clicking on any of the pictures.