ul.gridList {
	text-align: center;
	max-width: 800px;
	-webkit-padding-start: 0px;
	list-style: none;
	display: grid;
	grid-auto-rows: minmax(125px, auto);
    grid-gap: .5rem;
}
@media screen and (min-width: 20em) {
    .gridList {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1px;
    }
}
@media screen and (min-width: 30em) {
    .gridList {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1px;
    }
}
@media screen and (min-width: 40em) {
    .gridList {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 2px;
    }
}
@media screen and (min-width: 60em) {
    .gridList {
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 2px;
    }
}

ul.gridList li {
    position: relative;
	width: 146px;
	padding: 3px;

    img {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        border: 0;
        height: 125px;
        transition: 0.5s;

        &.with_shadow {
            filter: drop-shadow(2px 2px 3px #888888);
        }
    }

    &:hover img {
        height: 100px;

        &.with_shadow {
            filter: none;
        }
    }
}

ul.gridList li span.imagetitle {
    position: absolute;
    top: 100px;
    transform: translateX(-50%);

    visibility: hidden;
    opacity: 0;
    transition: 0.5s;

	font-size: var(--font-size-n);
	font-weight: bold;
	font-style: normal;
	text-align: center;
	color: var(--primary-color);
	white-space: nowrap;
}
ul.gridList li:hover span.imagetitle {
    visibility: visible;
    opacity: 1;
}