* {
    box-sizing: border-box;
}

.polaroid {
    background: #eee;
    padding: 1rem;
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);

}

.polaroid>img {
    max-width: 100%;
    height: auto;
}

.caption {
    font-size: 0.1rem;
    text-align: center;
    line-height: 0.5em;
}

.item {
    width: 30%;
    display: inline-block;
    margin-top: 2rem;
    filter: grayscale(100%);
    animation: flatten 0.15s linear;
}

.item .polaroid:before {
    content: '';
    position: absolute;
    z-index: -1;
    transition: all 0.35s;
    animation: flatten_polaroid 0.15s linear;
}

.item:nth-of-type(1) {
    transform: scale(0.8, 0.8) rotate(5deg);
}

.item:nth-of-type(1) .polaroid:before {
    transform: rotate(6deg);
    height: 20%;
    width: 47%;
    bottom: 30px;
    right: 12px;
    box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}

.item:nth-of-type(2) {
    transform: scale(0.8, 0.8) rotate(-5deg);
    transition: all 0.35s;
}

.item:nth-of-type(2) .polaroid:before {
    transform: rotate(-6deg);
    height: 20%;
    width: 47%;
    bottom: 30px;
    left: 12px;
    box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}

.item:nth-of-type(3) {
    transform: scale(0.8, 0.8) rotate(-3deg);
    transition: all 0.35s;
}

.item:nth-of-type(3) .polaroid:before {
    transform: rotate(-4deg);
    height: 20%;
    width: 47%;
    bottom: 30px;
    left: 12px;
    box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}

.item:nth-of-type(4) {
    transform: scale(0.8, 0.8) rotate(3deg);
    transition: all 0.35s;
}

.item:nth-of-type(+4) .polaroid:before {
    transform: rotate(4deg);
    height: 20%;
    width: 47%;
    bottom: 30px;
    right: 12px;
    box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}


@keyframes flatten {
    to {
        filter: none;
        transform: scale(0.9, 0.9) rotate(1deg);
    }
}

@keyframes flatten_polaroid {
    to {
        position: absolute;
        z-index: -1;
        transform: rotate(1deg);
        height: 90%;
        width: 90%;
        bottom: 0%;
        right: 5%;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    }
}

:root * {
    /* Pause the animation */
    animation-play-state: paused;
    /* Bind the animation to scroll */
    animation-delay: calc(var(--scroll) * -1s);
    /* These last 2 properites clean up overshoot weirdness */
    animation-iteration-count: 1;
    animation-fill-mode: both;
}