<xaiArtifact artifact_id="6b8e4f1a-2c9d-4a1b-9f7e-3d8c9f4b2e5c" artifact_version_id="3e4b2c7d-8f1a-4c9b-9d7e-2f8c9f4b2e5d" title="")
.fitg-gallery {
display: inline-block;
margin: 10px;
}
.fitg-thumbnail {
cursor: pointer;
text-align: center;
transition: transform 0.3s;
}
.fitg-thumbnail:hover {
transform: scale(1.05);
}
.fitg-thumbnail h3 {
margin: 10px 0;
}
.fitg-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 9999;
display: none;
}
.fitg-popup-container {
width: 80%;
max-height: 80vh;
margin: 10vh auto;
}
.fitg-popup .fitg-swiper {
width: 100%;
height: 100%;
}
.fitg-popup .fitg-swiper-wrapper .swiper-slide img {
max-width: 100%;
max-height: 70vh;
object-fit: contain;
}
.fitg-popup .fitg-swiper-button-prev,
.fitg-popup .fitg-swiper-button-next {
color: white;
}
.fitg-popup .fitg-grid-2,
.fitg-popup .fitg-grid-3 {
max-height: 80vh;
overflow-y: auto;
scrollbar-width: thin;
}
.fitg-popup .fitg-grid-row {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.fitg-popup .fitg-grid-item-2 {
flex: 1;
max-width: calc(50% - 5px);
margin: 0 5px;
}
.fitg-popup .fitg-grid-item-3 {
flex: 1;
max-width: calc(33.33% - 6.67px);
margin: 0 5px;
}
.fitg-popup .fitg-grid-item-2 img,
.fitg-popup .fitg-grid-item-3 img {
max-width: 100%;
height: auto;
object-fit: contain;
}
.fitg-popup .fitg-close {
position: fixed;
top: 20px;
right: 20px;
color: white;
font-size: 30px;
cursor: pointer;
}