:root {
--gallery-shade: rgba(0, 0, 0, .55);
--gallery-placeholder: #eef0f3;
--gallery-placeholder-dark: #222;
}
.gallery-stage {
position: relative;
}
.gallery-main {
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: var(--gallery-placeholder);
border-radius: var(--bs-border-radius);
}
.gallery-no-transition .carousel-item {
transition: none;
}
.gallery-main .carousel-inner,
.gallery-main .carousel-item {
height: 100%;
}
.gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-open,
.gallery-open:not(:disabled) {
cursor: zoom-in;
}
.gallery-open {
position: absolute;
inset: 0;
z-index: 1;
padding: 0;
border: 0;
background: transparent;
}
.gallery-open:focus-visible {
outline: 3px solid var(--bs-primary);
outline-offset: -3px;
}
.gallery-main .carousel-control-prev-icon,
.gallery-main .carousel-control-next-icon {
width: 3rem;
height: 3rem;
background-color: rgba(0, 0, 0, .35);
background-size: 2rem;
border-radius: var(--bs-border-radius);
flex-shrink: 0;
}
.gallery-main .carousel-control-prev,
.gallery-main .carousel-control-next {
opacity: 1;
}
.gallery-main .carousel-control-prev {
justify-content: flex-start;
padding-left: .75rem;
}
.gallery-main .carousel-control-next {
justify-content: flex-end;
padding-right: .75rem;
}
@media (hover: none) {
.gallery-main .carousel-control-prev,
.gallery-main .carousel-control-next {
display: none;
}
}
.gallery-lightbox-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.lightbox-slides {
height: 100%;
}
.lightbox-slides,
.lightbox-slides.pointer-event {
touch-action: none;
}
.gallery-lightbox-img {
transition: transform .2s ease;
}
.gallery-lightbox-img.is-gesture {
transition: none;
}
.gallery-strip {
--gallery-strip-gap: .5rem;
--gallery-strip-visible: 5;
position: relative;
}
.gallery-strip-track {
display: flex;
gap: var(--gallery-strip-gap);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.gallery-strip-track::-webkit-scrollbar {
display: none;
}
.gallery-thumb {
flex: 0 0 calc((100% - (var(--gallery-strip-visible) - 1) * var(--gallery-strip-gap)) / var(--gallery-strip-visible));
aspect-ratio: 4 / 3;
padding: 0;
border: 0;
border-radius: calc(var(--bs-border-radius) * .5);
overflow: hidden;
background-color: var(--gallery-placeholder);
opacity: .7;
scroll-snap-align: start;
transition: opacity .15s ease;
}
.gallery-thumb img,
.lightbox-grid-tile img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-thumb:hover {
opacity: 1;
}
.gallery-thumb.is-active {
opacity: 1;
outline: 2px solid var(--bs-primary);
outline-offset: -2px;
}
.gallery-thumb:focus-visible {
opacity: 1;
outline: 3px solid var(--bs-primary);
outline-offset: -3px;
}
.gallery-strip-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: var(--bs-border-radius);
background-color: var(--gallery-shade);
color: #fff;
font-size: 1rem;
}
.gallery-strip-arrow:hover {
background-color: rgba(0, 0, 0, .8);
}
.gallery-strip-prev {
left: .25rem;
}
.gallery-strip-next {
right: .25rem;
}
@media (hover: none) {
.gallery-strip-arrow {
display: none;
}
}
.gallery-strip-page {
padding: .5rem;
}
.gallery-strip-page .gallery-strip-prev {
left: .75rem;
}
.gallery-strip-page .gallery-strip-next {
right: .75rem;
}
.gallery-hud {
position: absolute;
left: .75rem;
right: .75rem;
bottom: .75rem;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
pointer-events: none;
}
.gallery-counter,
.gallery-grid-open {
padding: .4rem .8rem;
border-radius: var(--bs-border-radius);
background-color: var(--gallery-shade);
color: #fff;
font-size: .95rem;
line-height: 1.2;
}
.gallery-grid-open {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: .5rem;
border: 0;
}
.gallery-grid-open:hover {
background-color: rgba(0, 0, 0, .8);
}
.lightbox-with-strip {
--lightbox-strip-height: 6rem;
}
.gallery-strip-lightbox {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: min(100%, 1280px, calc((100vh - var(--lightbox-strip-height)) * 4 / 3));
height: var(--lightbox-strip-height);
margin: 0 auto;
padding: .75rem 1rem;
}
.gallery-strip-lightbox .gallery-strip-track {
width: max-content;
max-width: 100%;
height: 100%;
margin: 0 auto;
}
.gallery-strip-lightbox .gallery-thumb {
flex: 0 0 auto;
width: 6rem;
height: calc(var(--lightbox-strip-height) - 1.5rem);
background-color: var(--gallery-placeholder-dark);
opacity: .55;
}
.gallery-strip-lightbox .gallery-thumb:hover {
opacity: 1;
}
.gallery-strip-lightbox .gallery-thumb.is-active {
opacity: 1;
outline-color: #fff;
}
.gallery-strip-lightbox .gallery-thumb:focus-visible {
opacity: 1;
outline-color: #fff;
}
.gallery-strip-lightbox .gallery-strip-prev {
left: 1rem;
}
.gallery-strip-lightbox .gallery-strip-next {
right: 1rem;
}
@media (min-width: 768px) and (min-height: 560px) {
.lightbox-with-strip .lightbox-slides {
height: calc(100% - var(--lightbox-strip-height));
}
.gallery-strip-lightbox {
display: block;
}
}
.lightbox-grid-toggle {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: var(--lightbox-bar-height);
height: var(--lightbox-bar-height);
padding: 0;
border: 0;
border-radius: var(--bs-border-radius);
background-color: rgba(0, 0, 0, .6);
color: #fff;
font-size: 2.4rem;
line-height: 1;
}
.lightbox-grid-toggle:hover {
background-color: rgba(0, 0, 0, 1);
}
.lightbox-grid {
display: none;
position: absolute;
inset: 0;
z-index: 5;
overflow-y: auto;
padding: 1rem 1rem 2rem;
}
.lightbox-grid-inner {
max-width: 72rem;
margin: 0 auto;
}
.lightbox-grid-title {
display: flex;
align-items: center;
min-height: var(--lightbox-bar-height);
margin: 0 3rem 1rem 0;
color: #fff;
font-size: var(--lightbox-bar-font);
}
.lightbox-grid-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
}
@media (min-width: 768px) {
.lightbox-grid-tiles {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 992px) {
.lightbox-grid-tiles {
grid-template-columns: repeat(6, 1fr);
}
}
.lightbox-grid-tile {
aspect-ratio: 4 / 3;
padding: 0;
border: 0;
border-radius: var(--bs-border-radius);
overflow: hidden;
background-color: var(--gallery-placeholder-dark);
opacity: .85;
transition: opacity .15s ease;
}
.lightbox-grid-tile:hover,
.lightbox-grid-tile:focus-visible {
opacity: 1;
}
.lightbox-grid-tile.is-current {
opacity: 1;
outline: 2px solid #fff;
outline-offset: -2px;
}
.lightbox-content.is-grid .lightbox-grid {
display: block;
}
.lightbox-content.is-grid .lightbox-slides,
.lightbox-content.is-grid .gallery-strip-lightbox {
visibility: hidden;
}
.lightbox-content.is-grid .lightbox-counter,
.lightbox-content.is-grid .lightbox-grid-toggle {
display: none;
}
@media (min-width: 768px) {
.gallery-layout-left,
.gallery-layout-right {
display: grid;
gap: .5rem;
padding: .5rem;
}
.gallery-layout-left {
grid-template-columns: 6.5rem minmax(0, 1fr);
}
.gallery-layout-right {
grid-template-columns: minmax(0, 1fr) 8rem;
}
.gallery-layout-left .gallery-grid-open,
.gallery-layout-right .gallery-grid-open {
display: none;
}
}
.gallery-layout-left .gallery-hud,
.gallery-layout-right .gallery-hud {
right: 3.5rem;
justify-content: flex-start;
}
.gallery-strip-vertical {
--gallery-strip-visible: 4;
}
.gallery-strip-vertical .gallery-strip-track {
position: absolute;
inset: 0;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type: y proximity;
}
.gallery-strip-vertical .gallery-thumb {
width: 100%;
aspect-ratio: auto;
}
.gallery-strip-more,
.gallery-tile-more {
background-color: var(--gallery-shade);
color: #fff;
font-size: 1.25rem;
}
.gallery-strip-more:hover,
.gallery-tile:hover .gallery-tile-more {
background-color: rgba(0, 0, 0, .7);
}
.gallery-strip-more {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
height: calc((100% - (var(--gallery-strip-visible) - 1) * var(--gallery-strip-gap)) / var(--gallery-strip-visible));
padding: 0;
border: 0;
border-radius: calc(var(--bs-border-radius) * .5);
}
.gallery-tile {
position: relative;
flex: 0 1 calc((100% - 3 * .5rem) / 4);
min-height: 0;
padding: 0;
border: 0;
border-radius: calc(var(--bs-border-radius) * .5);
overflow: hidden;
background-color: var(--gallery-placeholder);
}
.gallery-tile,
.gallery-tile:not(:disabled) {
cursor: zoom-in;
}
.gallery-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .15s ease;
}
.gallery-tile:hover img {
opacity: .85;
}
.gallery-tile:focus-visible {
outline: 3px solid var(--bs-primary);
outline-offset: 2px;
}
.gallery-tile-more {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .15s ease;
}