* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}

.gallery-container {
max-width: 1200px;
margin: 0 auto;
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
padding: 20px;
}

.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background: #fff;
aspect-ratio: 4 / 3;
}

.gallery-item:hover {
transform: scale(1.05);
box-shadow: 0 0 15px #8170cf, 0 0 30px #e0e0e0, 0 0 45px #ffffff;
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 8px;
}

.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
transform: translateY(100%);
transition: transform 0.3s ease;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
font-size: 0.9rem;
line-height: 1.4;
max-height: 60px;
overflow: hidden;
text-overflow: ellipsis;
}

.gallery-item:hover .caption {
transform: translateY(0);
}

@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}

.gallery-item {
aspect-ratio: 4 / 3;
}
}

@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
gap: 8px;
}

.gallery-item {
aspect-ratio: 16 / 9;
}
}

const images = [
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/489283714_176196772...",
caption: "Dr.J.Harsha, SE(HO&CC),MSO,CWC, Bengaluru inspected the sites Anjanari &Belne bridge",
url: "https://cwc.gov.in/mso/slide1"
},
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/489729655_176196373...",
caption: "Sh. Ankit Dudeja, Ex. Engg. Cauvery Division delivered 5 lectures on Soil Water Assessment Tool",
url: "https://cwc.gov.in/mso/slide2"
},
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/489629858_176196259...",
caption: "Monthly Review Meeting under the chairmanship of CE,MSO,CWC",
url: "https://cwc.gov.in/mso/slide3"
},
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/486972784_175352198...",
caption: "3rd Quarterly Dialogue Meeting of 2024-25 on Hydrological Observations and Flood Forecasting",
url: "https://cwc.gov.in/mso/slide4"
},
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/486862500_175351824...",
caption: "Monitoring visit to CADWM Components of Tillari Irrigation Project, (Goa) ",
url: "https://cwc.gov.in/mso/slide5"
},
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/484057340_174137068...",
caption: "Monitoring visit of 138 SMI schemes of Kalaburagi & Yadgir Districts of Karnataka - 05-08 February ",
url: "https://cwc.gov.in/mso/slide6"
},
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/484487141_174137072...",
caption: " A Team of Officers led by Sh. Ashok Kumar V. Director, Appraisal, MSO CWC visited 2 HO sites",
url: "https://cwc.gov.in/mso/slide7"
},
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/483067179_174105798...",
caption: "Monthly Review Meeting of December month under the chairmanship of CE,MSO,CWC, Bengaluru ",
url: "https://cwc.gov.in/mso/slide8"
},
{
src: "https://scontent.fmaa9-1.fna.fbcdn.net/v/t39.30808-6/484295058_174105805...",
caption: "Director (Monitoring)/SE(HO&CC) and SDE, Davangere inspected HO sites under UTSD ",
url: "https://cwc.gov.in/mso/slide9"
}
];

const gallery = document.querySelector('.gallery');

images.forEach(image => {
const item = document.createElement('div');
item.classList.add('gallery-item');
item.innerHTML = `

${image.caption}
`;
gallery.appendChild(item);
});