.kcr-guest-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.kcr-guest-gallery--columns-1 {
grid-template-columns: minmax(0, 1fr);
}
.kcr-guest-gallery--columns-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kcr-guest-gallery--columns-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kcr-guest-card {
overflow: hidden;
border: 1px solid #e6e9ee;
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.kcr-guest-photo-button {
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.kcr-guest-photo {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .2s ease;
}
.kcr-guest-photo-button:hover .kcr-guest-photo,
.kcr-guest-photo-button:focus-visible .kcr-guest-photo {
transform: scale(1.035);
}
.kcr-guest-body {
padding: 14px 15px 16px;
}
.kcr-guest-place {
margin: 0 0 9px;
color: #17202a;
font-size: 18px;
font-weight: 800;
line-height: 1.35;
letter-spacing: 0;
}
.kcr-guest-meta {
display: grid;
gap: 8px;
color: #667085;
font-size: 14px;
line-height: 1.45;
}
.kcr-guest-meta-line {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
row-gap: 5px;
min-width: 0;
}
.kcr-guest-flag {
flex: 0 0 auto;
width: 18px;
height: 13px;
border-radius: 2px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(16, 24, 40, .12);
}
.kcr-guest-country {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kcr-guest-date {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.kcr-guest-date-icon {
flex: 0 0 auto;
width: 15px;
height: 15px;
color: #8a94a6;
}
.kcr-guest-service {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
margin-top: 2px;
padding: 5px 9px;
border-radius: 999px;
background: #edf8f2;
color: #2f7d59;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.kcr-guest-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
place-items: center;
padding: 24px;
background: rgba(11, 18, 32, .82);
}
.kcr-guest-lightbox.is-open {
display: grid;
}
.kcr-guest-lightbox-panel {
position: relative;
width: min(980px, 100%);
overflow: hidden;
border-radius: 8px;
background: #fff;
box-shadow: 0 14px 34px rgba(16, 24, 40, .18);
}
.kcr-guest-lightbox img {
display: block;
width: 100%;
max-height: calc(90vh - 86px);
object-fit: contain;
background: #111827;
}
.kcr-guest-lightbox-caption {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
color: #667085;
font-size: 14px;
line-height: 1.45;
}
.kcr-guest-lightbox-title {
margin: 0 0 6px;
color: #17202a;
font-size: 18px;
font-weight: 800;
line-height: 1.35;
}
.kcr-guest-lightbox-close {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
padding: 0 0 3px;
border: 1px solid #e6e9ee;
border-radius: 999px;
background: #fff;
color: #17202a !important;
font-size: 24px;
font-weight: 700;
line-height: 0;
text-align: center;
cursor: pointer;
box-shadow: none;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.kcr-guest-lightbox-close:hover,
.kcr-guest-lightbox-close:focus-visible {
border-color: #cfd5df;
background: #f8fafc;
color: #17202a !important;
}
body.kcr-guest-lightbox-open {
overflow: hidden;
}
@media (max-width: 860px) {
.kcr-guest-gallery,
.kcr-guest-gallery--columns-3,
.kcr-guest-gallery--columns-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.kcr-guest-gallery,
.kcr-guest-gallery--columns-2,
.kcr-guest-gallery--columns-3,
.kcr-guest-gallery--columns-4 {
grid-template-columns: 1fr;
}
.kcr-guest-lightbox {
padding: 12px;
}
}