Podcast Episode Grid

The responsive grid can be the actual podcast where the visitor can listen to an episode while scanning through the others. It can also be used to play a "taster" audio clip and link to the main episode.
The grid shows the latest episode at a larger size when viewed on wider screens. On tablets in portrait mode, it is the same size as the others and the grid has two columns. On mobile phones in portrait mode the grid items stack vertically.
The grid can acommodate up to 48 items.
Grid Items
Each grid item is an HTML5 <figure> element with an image with alt text, a caption the <figcaption> element, an optional label and link and a play/pause button.
Images
The images should all have the same aspect ratio and be cropped to about 480px or less wide before importing into EverWeb.
Lazy Load
Any image grid or slideshow with more than a few images will effect the page download time - especially on mobile devices. To prevent this, the images are lazy loading so that only the first few are downloaded at page load. The rest are downloade as the page is scrolled.
Caption
The font can be web safe or Google hosted with a web safe fallback. The caption has controls for the font size, color, background color and opacity.
Link
The link is positioned at the top right and can show on hover when viewed on computers. It has controls for font size, color, hover color, background color and opacity and border radius.
The links can be configured to open internal or external pages and have a new window option.
Label
The label sits at the top left and shares the link settings. It has its own control for setting a different font color.
Audio
The audio play/pause button is centered in the image and plays the MP3 file on click or tap. The plugin allows for pausing one player when another is selected.
Grid
The grid has controls for background color and opacity, grid gap and padding. The gap and padding have controls for resetting the values for when the page is viewed on mobile phones in portrait mode.
Container
The grid wrapper has controls for background color and its opacity and for vertically spacing the item from those above and below it.