.thumbnail-grid {
    user-select: none
}
.thumbnail-grid figure {
    position: relative;
    min-width: 200px;
    height: 300px;
    margin: 5px;
    border-radius: 3px;
    box-shadow: inset 0 -40px 0 0 rgba(0,0,0,.1);
    transition: all .2s ease-in-out
}
.thumbnail-grid figure:hover {
    box-shadow: inset 0 -300px 0 0 rgba(0,0,0,.5);
}
.thumbnail-grid figcaption {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #f4f4f4;
    text-shadow: 0 0 3px #000;
    bottom: 5px;
    transition: all .2s ease-in-out
}
.thumbnail-grid figure:hover figcaption {
    bottom: 150px
}
.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch
}
.flex-item {
    flex: 1 0 auto
}

/* Thumbnails, just for demo purposes */
.thumbnail-grid figure.i1 {
    background-image: url("1.jpg");
    background-size: cover;
	 background-color: #cccccc;
}
.thumbnail-grid figure.i2 {
	background: url(https://anselmurban.de/codepen-img/goerlitzmade.png) no-repeat center;
    background-size: cover
}
.thumbnail-grid figure.i3 {
    background: url(https://anselmurban.de/codepen-img/goerlitzmade.png) no-repeat center;
    background-size: cover
}
/* Thumbnails for HiDPI/retina screens */
@media print,
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 120dpi) {
    .thumbnail-grid figure.i1 {
		background-image: url("../../1.jpg");
    }
    .thumbnail-grid figure.i2 {
        background-image: url(https://anselmurban.de/codepen-img/pension%402x.png)
    }
    .thumbnail-grid figure.i3 {
        background-image: url(https://anselmurban.de/codepen-img/goerlitzmade%402x.png)
    }
}