@media screen and (min-width: 768px) {
.catawp-tour-gallery .gallery-grid {
display: grid;
grid-template-columns: repeat(4, 250px);
gap: 10px;
justify-content: left;
}
.catawp-tour-gallery .gallery-item {
position: relative;
cursor: pointer;
width: 250px;
height: 250px;
overflow: hidden;
}
.catawp-tour-gallery .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
} @media screen and (max-width: 767px) {
.catawp-tour-gallery .gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
justify-content: center;
}
.catawp-tour-gallery .gallery-item {
position: relative;
cursor: pointer;
width: 100%;
padding-top: 100%; overflow: hidden;
}
.catawp-tour-gallery .gallery-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
} .catawp-tour-gallery .gallery-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 1.2em;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
} .catawp-gallery-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
z-index: 9999;
overflow-y: auto;
}
.catawp-gallery-modal .modal-content {
position: relative;
margin: 50px auto;
max-width: 800px;
background: #fff;
padding: 20px;
}
.catawp-gallery-modal .modal-close {
position: absolute;
top: 20px; right: 20px; cursor: pointer;
font-size: 32px; color: #333; text-shadow: 
-1px -1px 0 #fff, 
1px -1px 0 #fff, 
-1px  1px 0 #fff, 
1px  1px 0 #fff; width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
.catawp-gallery-modal .modal-image-container {
text-align: center;
}
.catawp-gallery-modal .modal-image-container img {
max-width: 100%;
height: auto;
}
.catawp-gallery-modal .modal-carousel {
margin-top: 20px;
display: flex;
overflow-x: auto;
gap: 10px;
}
.catawp-gallery-modal .modal-carousel .carousel-item {
flex: 0 0 auto;
width: 100px;
cursor: pointer;
}
.catawp-gallery-modal .modal-carousel .carousel-item img {
width: 100%;
height: auto;
display: block;
} @media screen and (max-width: 768px) {
.catawp-gallery-modal .modal-content {
width: 100%;
height: 100%;
margin: 0;
padding: 10px;
}
.catawp-gallery-modal .modal-carousel .carousel-item {
width: 70px;
}
}