.brcp-gallery {
position: relative;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 8px;
height: clamp(320px, 42vw, 540px);
border-radius: 14px;
overflow: hidden;
}
.brcp-gallery--single {
grid-template-columns: 1fr;
}
.brcp-gallery__side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 8px;
min-height: 0;
}
.brcp-gallery__main,
.brcp-gallery__thumb {
display: block;
position: relative;
overflow: hidden;
min-height: 0;
}
.brcp-gallery__main img,
.brcp-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter 0.2s ease;
}
.brcp-gallery__main:hover img,
.brcp-gallery__thumb:hover img {
filter: brightness(0.88);
} .brcp-gallery__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
margin-top: 12px;
}
.brcp-gallery__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
background: var(--e-global-color-primary, #2e72ce);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
transition: filter 0.2s ease, transform 0.1s ease;
}
.brcp-gallery__btn:hover {
background: var(--e-global-color-primary, #2e72ce);
color: #fff;
filter: brightness(0.88);
}
.brcp-gallery__btn:active {
transform: scale(0.97);
}
.brcp-gallery__btn i {
font-size: 16px;
} .brcp-modal {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: #fff;
flex-direction: column;
}
.brcp-modal.is-open {
display: flex;
}
html.brcp-modal-open,
html.brcp-modal-open body {
overflow: hidden;
}
.brcp-modal__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid #e5e5e5;
flex: 0 0 auto;
}
.brcp-modal__title {
font-size: 15px;
font-weight: 600;
color: #222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brcp-modal__close {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 50%;
font-size: 26px;
line-height: 1;
color: #222;
cursor: pointer;
transition: background 0.2s ease;
}
.brcp-modal__close:hover {
background: #f2f2f2;
}
.brcp-modal__body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
} .brcp-modal__photos {
max-width: 960px;
margin: 0 auto;
padding: 24px 16px 48px;
display: flex;
flex-direction: column;
gap: 16px;
}
.brcp-modal__photo {
margin: 0;
}
.brcp-modal__photo img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
} .brcp-modal--tour .brcp-modal__body {
overflow: hidden;
background: #111;
}
.brcp-modal__iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
} .brcp-modal__videos {
max-width: 960px;
margin: 0 auto;
padding: 24px 16px 48px;
display: flex;
flex-direction: column;
gap: 24px;
}
.brcp-modal__video {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.brcp-modal__video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
} @media (max-width: 767px) {
.brcp-gallery {
grid-template-columns: 1fr;
height: clamp(220px, 60vw, 320px);
border-radius: 10px;
}
.brcp-gallery__side {
display: none;
}
.brcp-gallery__actions {
gap: 6px;
margin-top: 10px;
}
.brcp-gallery__btn {
padding: 8px 11px;
font-size: 12px;
}
.brcp-modal__photos,
.brcp-modal__videos {
padding: 16px 10px 32px;
}
}