.shelf {
	position: relative;
	height: 15px;
	margin: 15px 0 60px 0;
}

.shelf:after {
    content: "";
    height: 60px;
    width: 100%;
    position: absolute;
    top: 15px;
    display: block;
    background: linear-gradient(180deg, #E5E5E5FF 0%, #E5E5E500 100%);
    clip-path: polygon(0% 0%, 100% 0%, 97% 100%, 3% 100%);
    z-index: -1;
}

.shelf:before {
    content: "";
    height: 15px;
    width: 100%;
    position: absolute;
    top: -15px;
    display: block;
    clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%);
    z-index: -1;
}

.shelf-silver:before {
    background: linear-gradient(180deg, #DDD9D1 10%, #EEECE8 90%);
}

.shelf-gold:before {
    background: linear-gradient(180deg, #FDBE68 10%, #FEDFB4 90%);
}

.shelf-platin:before {
    background: linear-gradient(180deg, #E2D4E8 10%, #F1EAF4 90%);
}

.shelf-gallery {
    padding: 0 3%;
    flex-wrap: nowrap;
}

/* Kleine Bildschirme */
@media (max-width: 480px) {
    .shelf-gallery {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .shelf-gallery::-webkit-scrollbar {
        display: none;
    }

    .shelf-gallery > figure {
        flex: 0 0 40%;
        scroll-snap-align: start;
        margin: 0;
    }

    .shelf-gallery img {
        width: 100%;
        height: auto;
        display: block;
    }
}


.shelf-gallery > figure {
	margin-top: auto !important;
	margin-bottom: 0 !important;
	transition: transform 0.2s ease-out;
}

.shelf-gallery > figure:hover {
    transform: scale(1.05) !important;
}