.gallerybox {
display: flex;
justify-content: center;
/*
The element causes a small amount of extra padding at the
bottom of the element, so we use this to balance out the look at the top
ideally we'd shift the out of the way, but we can't without also
shifting the
inside
*/
padding-top: 0.2em;
}
.gallerybox-gallery {
--gallerybox-nextprev-padding: 5vw;
--gallerybox-nextprev-move: 0.2em;
--gallerybox-nextprev-hover: 0.1em;
max-width: 80vmax;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: "main";
}
/* .gallerybox picture {
position: relative;
top: -1em;
}
.gallerybox picture > img {
position: relative;
top: 1em;
} */
.gallerybox-item {
grid-area: main;
z-index: 2;
}
.gallerybox-item > figcaption {
background: hsla(0, 0%, 95%, 0.75);
position: absolute;
bottom: 0.25em; left: 0; right: 0;
padding: 0.75em 1em;
text-align: center;
}
.gallerybox-gallery > .gallerybox-item:target {
display: block;
z-index: 100;
}
/* .gallerybox-gallery > .gallerybox-item:not(:target) {
display: none;
z-index: 2;
}
.gallerybox-item:not(:target) ~ .gallerybox-item:last-child {
display: block;
z-index: 2;
} */
/*
.gallerybox-gallery:target-within > .gallerybox-item:target {
display: block;
}
.gallerybox-gallery:target-within > .gallerybox-item:not(:target) {
display: none;
} */
.gallerybox-item {
position: relative;
}
.gallerybox-item img {
max-width: 100%;
}
:where(.gallerybox-prev, .gallerybox-next) {
display: flex;
align-items: center;
height: 100%;
position: absolute; top: 0;
vertical-align: middle;
font-weight: bold;
font-size: 4em;
color: hsla(0, 0%, 100%, 0.8) !important;
text-decoration: none;
transform: none;
transition: transform 0.25s;
}
.gallerybox-item > .gallerybox-prev {
padding-left: var(--gallerybox-nextprev-padding);
left: 0;
}
.gallerybox-item > .gallerybox-next {
padding-right: var(--gallerybox-nextprev-padding);
right: 0;
}
:where(.gallerybox-prev, .gallerybox-next):hover {
color: hsla(0, 0%, 100%, 1) !important;
}
:is(.gallerybox-prev, .gallerybox-next):active {
color: hsla(0, 0%, 100%, 1) !important;
}
.gallerybox-next:hover { transform: translateX(calc(var(--gallerybox-nextprev-hover) * -1)); }
.gallerybox-prev:hover { transform: translateX(var(--gallerybox-nextprev-hover)); }
.gallerybox-prev:active { transform: translateX(calc(var(--gallerybox-nextprev-move) * -1)); }
.gallerybox-next:active { transform: translateX(var(--gallerybox-nextprev-move)); }