.kr-gallery {
--kr-gallery-accent: #dc6324;
max-width: 980px;
margin: 24px auto 32px;
}
.kr-gallery__main {
position: relative;
background: #151515;
}
.kr-gallery__main .swiper-slide {
box-sizing: border-box;
margin: 0;
text-align: center;
}
.kr-gallery__link,
.kr-gallery__image {
display: block;
width: 100%;
}
.kr-gallery__image {
height: auto;
max-height: 70vh;
object-fit: contain;
margin: 0 auto;
}
.kr-gallery__prev,
.kr-gallery__next {
position: absolute;
z-index: 3;
top: 50%;
display: grid;
place-items: center;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .68);
color: #fff;
cursor: pointer;
transform: translateY(-50%);
}
.kr-gallery__prev { left: 12px; }
.kr-gallery__next { right: 12px; }
.kr-gallery__prev span,
.kr-gallery__next span { font: normal 34px/1 Arial, sans-serif; transform: translateY(-2px); }
.kr-gallery__main .swiper-button-disabled { opacity: .25; cursor: default; }
.kr-gallery__counter {
margin: 8px 0;
color: #555;
font-size: 14px;
text-align: center;
}
.kr-gallery__thumbs .swiper-slide { box-sizing: border-box; }
.kr-gallery__thumb {
display: block;
width: 100%;
padding: 0;
border: 3px solid transparent;
border-radius: 0;
background: transparent;
cursor: pointer;
}
.kr-gallery__thumb img {
display: block;
width: 100%;
height: 78px;
object-fit: cover;
}
.kr-gallery__thumbs .swiper-slide-thumb-active .kr-gallery__thumb { border-color: var(--kr-gallery-accent); }
.kr-gallery button:focus-visible,
.kr-gallery__link:focus-visible { outline: 3px solid var(--kr-gallery-accent); outline-offset: 2px; }
.pswp { z-index: 999999 !important; }
@media (max-width: 600px) {
.kr-gallery__prev,
.kr-gallery__next { width: 36px; height: 36px; }
.kr-gallery__thumb img { height: 60px; }
} .kr-gallery__main {
width: 100%;
aspect-ratio: 3 / 2;
height: auto !important;
min-height: 0 !important;
line-height: 0;
overflow: hidden;
background: transparent;
}
.kr-gallery__main .swiper-wrapper,
.kr-gallery__main .swiper-slide,
.kr-gallery__link {
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.kr-gallery__link {
display: block;
line-height: 0;
}
.kr-gallery__image {
display: block;
width: 100%;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain;
} .kr-gallery__thumbs .swiper-slide {
height: auto !important;
min-height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.kr-gallery__thumb {
box-sizing: border-box;
width: 100%;
aspect-ratio: 3 / 2;
height: auto !important;
padding: 0 !important;
overflow: hidden;
line-height: 0;
}
.kr-gallery__thumb img {
display: block;
box-sizing: border-box;
width: 100%;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover;
}
@media (max-width: 600px) {
.kr-gallery__thumb img { height: 100% !important; }
} .kr-gallery__main .swiper-wrapper {
width: 100% !important;
}
.kr-gallery__main .swiper-slide {
box-sizing: border-box !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
overflow: hidden !important;
}
.kr-gallery__main .kr-gallery__link {
width: 100% !important;
overflow: hidden !important;
}
.kr-gallery__main .kr-gallery__image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}