.ultra-gallery-wrapper { margin: 30px 0; position: relative; }
.ultra-gallery-title { font-family: inherit; margin-bottom: 20px; font-size: 1.8rem; text-align: center; } .usg-carousel-container {
position: relative;
width: 100%;
}
.ultra-gallery-grid {
display: flex;
overflow-x: auto; gap: 15px;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab; }
.ultra-gallery-grid::-webkit-scrollbar { display: none; }
.ultra-gallery-grid:active { cursor: grabbing; } .ultra-gallery-grid.usg-smooth-scroll {
scroll-behavior: smooth;
scroll-snap-type: x mandatory; }
.ultra-gallery-item {
flex: 0 0 auto;
width: calc(28.57% - 15px); scroll-snap-align: start;
display: block;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 4/3;
user-select: none;
-webkit-user-drag: none;
}
.ultra-gallery-item img {
width: 100%; height: 100%; object-fit: cover;
pointer-events: none;
transition: transform 0.4s ease;
}
.ultra-gallery-item:hover img { transform: scale(1.03); } @media (max-width: 992px) { .ultra-gallery-item { width: calc(40% - 15px); } } @media (max-width: 600px) {
.ultra-gallery-item { width: calc(80% - 15px); scroll-snap-align: center; } .usg-carousel-btn { display: none !important; } } .usg-carousel-btn {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255, 255, 255, 0.8);
border: none; color: #333; width: 40px; height: 40px;
border-radius: 50%; font-size: 1.2rem; cursor: pointer;
z-index: 10; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
opacity: 0; transition: opacity 0.3s ease, background 0.3s ease;
} .usg-carousel-container:hover .usg-carousel-btn { opacity: 1; }
.usg-carousel-btn:hover { background: rgba(255, 255, 255, 1); color: var(--color-primary); }
.usg-carousel-prev { left: -20px; }
.usg-carousel-next { right: -20px; } #usg-lightbox {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.95); z-index: 999999;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
backdrop-filter: blur(10px);
}
#usg-lightbox.usg-active { opacity: 1; visibility: visible; }
.usg-lightbox-content {
position: relative;
width: 90%; max-width: 1200px; height: 90%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.usg-lightbox-img {
max-width: 100%; max-height: 85vh; 
width: auto; height: auto;
object-fit: contain; 
border-radius: 4px;
box-shadow: 0 10px 50px rgba(0,0,0,0.8);
transition: opacity 0.2s ease;
}
.usg-lightbox-caption {
color: #fff; text-align: center; margin-top: 15px;
font-size: 1.1rem; font-weight: 600;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
max-width: 80%;
} .usg-btn {
position: absolute; 
background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
width: 50px; height: 50px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.2s ease; z-index: 10;
backdrop-filter: blur(4px);
}
.usg-btn:hover { 
background: rgba(255, 255, 255, 0.3); 
border-color: #fff; } .usg-close { top: 25px; right: 25px; font-size: 2.2rem; padding-bottom: 4px; line-height: 1; }
.usg-prev { top: 50%; left: 25px; transform: translateY(-50%); font-size: 1.5rem; }
.usg-next { top: 50%; right: 25px; transform: translateY(-50%); font-size: 1.5rem; }  body.usg-no-scroll { 
overflow: hidden; 
} @media (max-width: 768px) {
.usg-lightbox-content { width: 100%; height: 100%; }
.usg-lightbox-img { max-height: 75vh; border-radius: 0; } .usg-btn { width: 40px; height: 40px; font-size: 1.2rem; }
.usg-close { top: 15px; right: 15px; font-size: 1.8rem; }
.usg-prev { left: 10px; }
.usg-next { right: 10px; }
}