Responsive Grid of Images $50 budget

Description Create a responsive grid of images to serve different sized images to different devices. Use the <picture> element to serve appropriate image sizes for the grid. Requirements, Using the <picture> element - create a responsive grid of images that substitute in appropriate images at each breakpoint. Use images from [login to view URL] (Links to an external site.)Links to an external site.. Using a mobile up approach create a grid that expands from one column into two columns and finally centered with three columns. Use a different image source for each of your breakpoints, and make sure they expand to fill in the space between your breakpoints. This is accomplished with a percentage based grid with the images having a max-width of 100%. At the very last pixel before the breakpoint, measure your grid column's width and make that image your picture srcset. Restrictions, Breakpoints Columns 0 -> 500px Single Column, Serve a 500 x 200 image that scales the full width of the screen. 500px <-> 960px Two Columns. Keep the 500 x 200 image but float the columns to fit two columns with 1% margin around the column items. 960px -> 3 Column, Centered at 960px. Serve 310 x 120 image, this will be the only extra picture source needed. The margin between the columns should now be 5px. For more details please view the attched file.