.ki-at-gallery {
--ki-blue: #354792;
--ki-blue-dark: #26336f;
--ki-blue-soft: #eef1fa;
--ki-blue-line: #d5dcf0;
--ki-navy: #0f1738;
--ki-ink: #16204a;
--ki-muted: #5a6590;
display: flex;
flex-direction: column;
width: 100%;
margin: 2rem auto;
background: #fff;
border: 1px solid var(--ki-blue-line);
border-radius: 0;
box-shadow: 0 12px 32px rgba(38, 51, 111, .12);
overflow: hidden;
box-sizing: border-box;
color: var(--ki-ink);
}
.ki-at-gallery *,
.ki-at-gallery *::before,
.ki-at-gallery *::after {
box-sizing: border-box;
}
.ki-at-gallery:focus-visible {
outline: 3px solid var(--ki-blue);
outline-offset: 3px;
} .ki-at-gallery .ki-at-gallery__stage {
order: 1;
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
max-height: min(78vh, 780px);
min-height: 0;
padding: 0;
background: var(--ki-navy);
overflow: hidden;
}
.ki-at-gallery .ki-at-gallery__slide {
position: absolute;
inset: 0;
display: block;
width: 100%;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity .35s ease, visibility 0s linear .35s;
}
.ki-at-gallery .ki-at-gallery__slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity .35s ease;
}
.ki-at-gallery .ki-at-gallery__image-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: zoom-in;
}
.ki-at-gallery .ki-at-gallery__slide img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
object-fit: contain;
background: transparent;
} .ki-at-gallery .ki-at-gallery__arrow {
position: absolute;
z-index: 3;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--ki-blue);
font: inherit;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 18px rgba(15, 23, 56, .30);
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ki-at-gallery .ki-at-gallery__arrow:hover,
.ki-at-gallery .ki-at-gallery__arrow:focus-visible {
background: var(--ki-blue);
color: #fff;
transform: translateY(-50%) scale(1.07);
}
.ki-at-gallery .ki-at-gallery__arrow:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
.ki-at-gallery .ki-at-gallery__arrow--prev {
left: 14px;
}
.ki-at-gallery .ki-at-gallery__arrow--next {
right: 14px;
} .ki-at-gallery .ki-at-gallery__counter {
position: absolute;
z-index: 3;
top: 14px;
right: 14px;
padding: .3rem .8rem;
border-radius: 999px;
background: rgba(53, 71, 146, .92);
color: #fff;
font-size: .82rem;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.3;
font-variant-numeric: tabular-nums;
pointer-events: none;
} .ki-at-gallery .ki-at-gallery__caption {
order: 2;
display: block;
min-height: 3.6rem;
padding: .8rem 1.2rem .85rem;
border-top: 1px solid var(--ki-blue-line);
background: var(--ki-blue-soft);
color: var(--ki-ink);
font-size: .9rem;
font-weight: 600;
line-height: 1.45;
text-align: center;
} .ki-at-gallery .ki-at-gallery__caption.is-enhanced {
display: flex;
align-items: center;
justify-content: center;
gap: .8rem;
}
.ki-at-gallery .ki-at-gallery__caption.is-enhanced::before {
content: "";
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23354792' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5A1.5 1.5 0 0 1 5.5 7h2.2l1.2-1.8a1 1 0 0 1 .8-.5h4.6a1 1 0 0 1 .8.5L16.3 7h2.2A1.5 1.5 0 0 1 20 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5z'/%3E%3Ccircle cx='12' cy='12.8' r='3.4'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
box-shadow: 0 2px 8px rgba(53, 71, 146, .18);
}
.ki-at-gallery .ki-at-gallery__caption-text {
display: block;
text-align: center;
}
.ki-at-gallery .ki-at-gallery__caption:empty {
display: none;
}
.ki-at-gallery__caption small,
.ki-at-featured-caption small {
font-weight: 400;
}
.ki-at-gallery .ki-at-gallery__caption small {
display: block;
margin-top: .2rem;
color: var(--ki-muted);
font-size: .8rem;
font-weight: 500;
} .ki-at-gallery .ki-at-gallery__thumbs {
order: 3;
display: flex;
gap: 10px;
padding: 14px 16px 16px;
overflow-x: auto;
background: #fff;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--ki-blue) var(--ki-blue-soft);
}
.ki-at-gallery .ki-at-gallery__thumbs::-webkit-scrollbar {
height: 8px;
}
.ki-at-gallery .ki-at-gallery__thumbs::-webkit-scrollbar-track {
background: var(--ki-blue-soft);
border-radius: 999px;
}
.ki-at-gallery .ki-at-gallery__thumbs::-webkit-scrollbar-thumb {
background: var(--ki-blue);
border-radius: 999px;
}
.ki-at-gallery .ki-at-gallery__thumb {
position: relative;
flex: 0 0 auto;
width: 144px;
height: auto;
aspect-ratio: 16 / 9;
padding: 0;
margin: 0;
border: 2px solid transparent;
border-radius: 10px;
background: var(--ki-blue-soft);
overflow: hidden;
cursor: pointer;
opacity: .62;
scroll-snap-align: center;
transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ki-at-gallery .ki-at-gallery__thumb:hover,
.ki-at-gallery .ki-at-gallery__thumb:focus-visible {
opacity: 1;
transform: translateY(-2px);
}
.ki-at-gallery .ki-at-gallery__thumb:focus-visible {
outline: 3px solid var(--ki-blue);
outline-offset: 2px;
}
.ki-at-gallery .ki-at-gallery__thumb.is-active {
opacity: 1;
border-color: var(--ki-blue);
box-shadow: 0 8px 18px rgba(53, 71, 146, .35);
transform: translateY(-2px);
}
.ki-at-gallery .ki-at-gallery__thumb img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
object-fit: cover;
} html.ki-at-lightbox-open {
overflow: hidden;
}
.ki-at-lightbox {
position: fixed;
inset: 0;
z-index: 2147483000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 1rem 1.5rem;
box-sizing: border-box;
animation: ki-at-lightbox-in .2s ease;
}
.ki-at-lightbox[hidden] {
display: none;
}
.ki-at-lightbox *,
.ki-at-lightbox *::before,
.ki-at-lightbox *::after {
box-sizing: border-box;
}
.ki-at-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 15, 40, .94);
cursor: zoom-out;
}
.ki-at-lightbox__figure {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: .9rem;
width: 100%;
max-width: min(1400px, 96vw);
margin: 0;
pointer-events: none;
}
.ki-at-lightbox__image {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 11rem);
object-fit: contain;
background: #0f1738;
box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
pointer-events: auto;
}
.ki-at-lightbox__caption {
max-width: 60rem;
color: #fff;
font-size: .9rem;
line-height: 1.45;
text-align: center;
pointer-events: auto;
}
.ki-at-lightbox__caption:empty {
display: none;
}
.ki-at-lightbox__caption small {
display: block;
margin-top: .2rem;
color: #c7d0f0;
font-size: .8rem;
}
.ki-at-lightbox__counter {
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
padding: .25rem .8rem;
border-radius: 999px;
background: rgba(53, 71, 146, .92);
color: #fff;
font-size: .85rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
.ki-at-lightbox__button {
position: absolute;
z-index: 2;
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: #354792;
font: inherit;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
transition: background .2s ease, color .2s ease;
}
.ki-at-lightbox__button[hidden] {
display: none;
}
.ki-at-lightbox__button:hover,
.ki-at-lightbox__button:focus-visible {
background: #354792;
color: #fff;
}
.ki-at-lightbox__button:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
.ki-at-lightbox__close {
top: 14px;
right: 14px;
}
.ki-at-lightbox__arrow {
top: 50%;
transform: translateY(-50%);
}
.ki-at-lightbox__arrow--prev {
left: 14px;
}
.ki-at-lightbox__arrow--next {
right: 14px;
}
@keyframes ki-at-lightbox-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 640px) {
.ki-at-lightbox {
padding: 3.6rem .5rem 1rem;
}
.ki-at-lightbox__image {
max-height: calc(100vh - 10rem);
}
.ki-at-lightbox__button {
width: 40px;
height: 40px;
}
.ki-at-lightbox__arrow--prev {
left: 6px;
}
.ki-at-lightbox__arrow--next {
right: 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.ki-at-lightbox {
animation: none;
}
}
.ki-at-featured-caption {
margin: -.25rem 0 1.25rem;
text-align: center;
font-size: .92rem;
line-height: 1.4;
} @media (max-width: 640px) {
.ki-at-gallery {
margin: 1.5rem auto;
border-radius: 0;
}
.ki-at-gallery .ki-at-gallery__arrow {
width: 38px;
height: 38px;
font-size: 1.05rem;
}
.ki-at-gallery .ki-at-gallery__arrow--prev {
left: 8px;
}
.ki-at-gallery .ki-at-gallery__arrow--next {
right: 8px;
}
.ki-at-gallery .ki-at-gallery__counter {
top: 8px;
right: 8px;
font-size: .75rem;
}
.ki-at-gallery .ki-at-gallery__caption {
min-height: 3.2rem;
padding: .65rem .9rem .7rem;
font-size: .85rem;
}
.ki-at-gallery .ki-at-gallery__caption.is-enhanced {
gap: .6rem;
}
.ki-at-gallery .ki-at-gallery__caption.is-enhanced::before {
width: 30px;
height: 30px;
background-size: 17px 17px;
}
.ki-at-gallery .ki-at-gallery__thumbs {
gap: 8px;
padding: 10px 12px 12px;
}
.ki-at-gallery .ki-at-gallery__thumb {
width: 108px;
border-radius: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.ki-at-gallery .ki-at-gallery__slide,
.ki-at-gallery .ki-at-gallery__slide.is-active,
.ki-at-gallery .ki-at-gallery__arrow,
.ki-at-gallery .ki-at-gallery__thumb {
transition: none;
}
}