.gallery { aspect-ratio: 5/3; margin: 20px 0 10px; position: relative; max-height: 500px; } .gallery.center { margin-left: auto; margin-right: auto; } .gallery .g-images-wrapper { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); overflow: hidden; border-radius: 3px; } .gallery .g-images-wrapper .g-images-wrapper2 { width: 100%; height: 100%; display: flex; flex-flow: row nowrap; overflow-y: hidden; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .gallery .g-images-wrapper .g-images-wrapper2::-webkit-scrollbar { display: none; } .gallery .g-images-wrapper .g-images-wrapper2 > div { width: 100%; height: 100%; flex-shrink: 0; scroll-snap-align: center; scroll-snap-stop: always; background: no-repeat center / contain; box-shadow: inset 0 0 2px rgba(0,0,0,0.15); position: relative; } .gallery .g-images-wrapper .g-images-wrapper2 > div > .g-img-credits { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); max-width: 180px; text-align: center; } .gallery .g-images-wrapper .g-images-wrapper2 > div > .g-img-credits a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.75em; font-weight: bold; margin: 0 0 5px; padding: 2px 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.4); color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } .gallery .gallery-dots { display: none; flex-flow: row nowrap; gap: 5px; justify-content: center; position: absolute; bottom: 10px; left: 0; right: 0; padding: 1px 0; overflow: hidden; } .gallery.g-has-dots .gallery-dots { display: flex; } .gallery .gallery-dots a { width: 8px; height: 8px; background: #aaa; border-radius: 50%; flex-shrink: 0; } @media (hover: hover) { .gallery .gallery-dots a:hover { background: #888; } } .gallery .gallery-dots a.on { width: 9px; height: 9px; margin: -1px 0 0; background: var(--clr-text); } .gallery .gallery-arrow { display: none; position: absolute; width: 25px; height: 60px; line-height: 60px; top: 50%; background: rgba(0, 0, 0, 0.15); font-size: 1em; text-align: center; opacity: 0.4; } .gallery .gallery-arrow.gallery-arrowL { left: 0; transform: translate(-100%, -50%); border-radius: 8px 0 0 8px; } .gallery .gallery-arrow.gallery-arrowR { right: 0; transform: translate(100%, -50%); border-radius: 0 8px 8px 0; } .gallery .gallery-arrow::before { display: inline-block; content: "◣"; } .gallery .gallery-arrow.gallery-arrowL::before { transform:translate(3px, 0) rotate(45deg) scale(0.8); } .gallery .gallery-arrow.gallery-arrowR::before { transform:translate(-3px, 0) rotate(225deg) scale(0.8); } @media (hover: hover) { .gallery .gallery-arrow:hover { opacity: 0.6; } } .gallery .gallery-arrow:active { opacity: 0.8; } @media (min-width:1024px) and (min-height:768px) { .gallery .gallery-arrow { display: block; } }