#gallery {
    position: fixed;
    z-index: 0;
    top: 0;
    /* background-color: rgba(255, 255, 255, 0.95); */
    transition: opacity .25s ease-in-out;
}

#bottomband {  
    height: 67px;
    z-index: 21;
    width: 100vw;
}

#titleband {
    position: inherit;
    bottom: 0;
    left: 0;
    display: flex;
    margin-bottom: -11px;
}

.oever {
    width: 170px;
}

#bottomband {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-top: 3rem;
    overflow: hidden;
    height: 48px;
}

#werke-container {
    display: flex;
/*     scroll-snap-type: x mandatory; */
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95);
}

figure {
    height: min-content;
    width: min-content;
    cursor: pointer;
    position: relative;
    scroll-snap-align: center;
}

figcaption {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: auto;
    -webkit-text-size-adjust: 100%;
}

.figcaption-wrapper {
    display: grid;
    grid-template-columns: min-content auto;
    grid-column-gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;

}

img {
    position: relative;
    z-index: 2;
    transition: opacity .5s ease;
}

img.lazy {
    opacity: 0;
  }
img:not(.initial) {
    transition: opacity 1s;
}
img.initial,
img.loaded,
img.error {
    opacity: 1;
}

img:not([src]) {
    visibility: hidden;
}

#hidebutton {
    position: fixed; 
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 100;
}

.bottomband-container {
    width: 100%;
    display: flex;
}