<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.wrapper {
width: 80%;
text-align: center;
}
.polaroid {
background: #fff;
padding: 1rem;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
}
.polaroid > img {
max-width: 100%;
height: auto;
}
.caption {
font-size: 1.8rem;
text-align: center;
line-height: 2em;
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.40s;
}
.item:nth-of-type(2n+1) {
transform: scale(0.8, 0.8) rotate(5deg);
transition: all 0.35s;
}
.item:nth-of-type(2n+1) .polaroid:before {