/*!
 * Property Gallery
 * Layout and interaction only.
 */

.ciao-pg{
position:relative;
display:block;
width:100%;
max-width:none;
min-width:0;
--ciao-pg-ratio:16 / 10;
--ciao-pg-height:500px;
--ciao-pg-main-fr:1fr;
--ciao-pg-grid-thumb-ratio:4 / 3;
--ciao-pg-overlay:#000;
--ciao-pg-overlay-opacity:.14;
}

.ciao-pg *,
.ciao-pg *::before,
.ciao-pg *::after{
box-sizing:border-box;
}

.ciao-pg img{
display:block;
}

.ciao-pg-grid .ciao-pg-layout{
display:grid;
grid-template-columns:minmax(0,var(--ciao-pg-main-fr)) minmax(0,1fr);
gap:10px;
width:100%;
min-width:0;
align-items:stretch;
}

.ciao-pg-grid .ciao-pg-main-wrap{
position:relative;
width:100%;
min-width:0;
aspect-ratio:var(--ciao-pg-ratio);
}

.ciao-pg-grid.ciao-pg-fixed-height .ciao-pg-main-wrap{
aspect-ratio:auto;
height:var(--ciao-pg-height);
}

.ciao-pg-grid .ciao-pg-main{
width:100%;
height:100%;
}

.ciao-pg-grid .ciao-pg-side{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:repeat(2,minmax(0,1fr));
gap:10px;
width:100%;
height:100%;
min-width:0;
min-height:0;
}

.ciao-pg-slider{
width:100%;
min-width:0;
}

.ciao-pg-slider .ciao-pg-main-wrap{
position:relative;
width:100%;
min-width:0;
aspect-ratio:var(--ciao-pg-ratio);
}

.ciao-pg-slider.ciao-pg-fixed-height .ciao-pg-main-wrap{
aspect-ratio:auto;
height:var(--ciao-pg-height);
}

.ciao-pg-slider .ciao-pg-main{
width:100%;
height:100%;
}

.ciao-pg-slider-thumbs{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
width:100%;
min-width:0;
margin-top:10px;
}

.ciao-pg-slider-thumbs .ciao-pg-thumb{
aspect-ratio:4 / 3;
}

.ciao-pg-main,
.ciao-pg-thumb{
position:relative;
display:block;
width:100%;
min-width:0;
min-height:0;
margin:0;
padding:0;
overflow:hidden;
cursor:pointer;
}

.ciao-pg-main img,
.ciao-pg-thumb img{
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
object-fit:cover;
transform:none !important;
transition:none !important;
}

.ciao-pg-main::after,
.ciao-pg-thumb::after{
content:"";
position:absolute;
inset:0;
z-index:1;
background:var(--ciao-pg-overlay);
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}

.ciao-pg-main:hover::after,
.ciao-pg-thumb:hover::after{
opacity:var(--ciao-pg-overlay-opacity);
}

.ciao-pg-more{
position:absolute;
z-index:3;
right:10px;
bottom:10px;
padding:7px 10px;
background:rgba(20,20,20,.78);
color:#fff;
white-space:nowrap;
}

.ciao-pg-arrow,
.ciao-pg-lb-arrow,
.ciao-pg-close,
.ciao-pg-arrow:hover,
.ciao-pg-lb-arrow:hover,
.ciao-pg-close:hover,
.ciao-pg-arrow:focus,
.ciao-pg-lb-arrow:focus,
.ciao-pg-close:focus{
appearance:none !important;
-webkit-appearance:none !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
box-shadow:none !important;
text-shadow:none !important;
cursor:pointer;
}

.ciao-pg-arrow{
position:absolute;
z-index:5;
top:50%;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
transform:translateY(-50%);
border-radius:50% !important;
background:rgba(255,255,255,.92) !important;
color:#222 !important;
font-size:24px;
line-height:1;
}

.ciao-pg-prev{
left:12px;
}

.ciao-pg-next{
right:12px;
}

html.ciao-pg-open,
body.ciao-pg-open{
overflow:hidden !important;
}

.ciao-pg-lightbox{
position:fixed;
z-index:999999;
inset:0;
display:flex;
align-items:center;
justify-content:center;
visibility:hidden;
opacity:0;
pointer-events:none;
background:rgba(6,8,10,.95);
transition:opacity .2s ease,visibility .2s ease;
}

.ciao-pg-lightbox.is-open{
visibility:visible;
opacity:1;
pointer-events:auto;
}

.ciao-pg-lightbox-image{
display:block;
width:auto !important;
height:auto !important;
max-width:90vw;
max-height:86vh;
object-fit:contain;
touch-action:pan-y;
}

.ciao-pg-close{
position:absolute;
z-index:10;
top:20px;
right:24px;
width:44px;
height:44px;
background:transparent !important;
color:#fff !important;
font-size:38px;
line-height:1;
}

.ciao-pg-lb-arrow{
position:absolute;
z-index:5;
top:50%;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
transform:translateY(-50%);
border-radius:50% !important;
background:rgba(255,255,255,.14) !important;
color:#fff !important;
font-size:38px;
line-height:1;
}

.ciao-pg-lb-prev{
left:24px;
}

.ciao-pg-lb-next{
right:24px;
}

.ciao-pg-counter{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
color:#fff;
}

@media (max-width:1024px){

.ciao-pg-grid .ciao-pg-layout{
grid-template-columns:1fr !important;
}

.ciao-pg-grid .ciao-pg-side{
grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-rows:none;
grid-auto-rows:auto;
height:auto;
}

.ciao-pg-grid .ciao-pg-thumb{
aspect-ratio:var(--ciao-pg-grid-thumb-ratio);
}

}

@media (max-width:767px){

.ciao-pg-grid .ciao-pg-layout{
grid-template-columns:1fr !important;
}

.ciao-pg-grid .ciao-pg-main-wrap{
width:100%;
min-width:0;
aspect-ratio:var(--ciao-pg-ratio);
}

.ciao-pg-grid.ciao-pg-fixed-height .ciao-pg-main-wrap{
aspect-ratio:auto;
height:var(--ciao-pg-height);
}

.ciao-pg-grid .ciao-pg-side{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:repeat(2,auto);
grid-auto-rows:auto;
width:100%;
height:auto;
}

.ciao-pg-grid .ciao-pg-thumb{
width:100%;
height:auto;
aspect-ratio:var(--ciao-pg-grid-thumb-ratio);
}

.ciao-pg-slider-thumbs{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.ciao-pg-arrow{
width:34px;
height:34px;
font-size:20px;
}

.ciao-pg-prev{
left:10px;
}

.ciao-pg-next{
right:10px;
}

.ciao-pg-more{
right:8px;
bottom:8px;
padding:6px 8px;
}

.ciao-pg-close{
top:12px;
right:12px;
}

.ciao-pg-lb-arrow{
width:42px;
height:42px;
font-size:30px;
}

.ciao-pg-lb-prev{
left:8px;
}

.ciao-pg-lb-next{
right:8px;
}

.ciao-pg-lightbox-image{
max-width:94vw;
max-height:82vh;
}

}