/**
 * Gallery Section
 * Image gallery with scroll animations and grid layout
 */

#c2_1 {
  position: relative;
}

#c2_1 h1 {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, 0%);
  z-index: 1;
  margin: 0;
}

#c2_1 section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

#c2_1 .gallery {
  height: 100vh;
}

#c2_1 .img {
  width: 98%;
  height: 300px;
  position: relative;
  background-size: cover;
  background-position: center;
  z-index: -1;
  border-radius: 20px;
  will-change: transform, opacity;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform-origin: center center;
}

/* Gallery loading state for animation */
#c2_1 .img.loaded {
  opacity: 1;
}

/* Gallery images - mapped from constants.js GALLERY_IMAGES */
#c2_1 .img:nth-of-type(1) {
  background-image: url('../../Images/pp1.jpeg');
}

#c2_1 .img:nth-of-type(2) {
  background-image: url('../../Images/pp2.jpeg');
  background-position: center;
}

#c2_1 .img:nth-of-type(3) {
  background-image: url('../../Images/pp15.jpeg');
  background-position: center;
}

#c2_1 .img:nth-of-type(4) {
  background-image: url('../../Images/pp16.jpeg');
  background-position: center;
}

#c2_1 .img:nth-of-type(5) {
  background-image: url('../../Images/pp5.jpeg');
  background-position: center;
}

#c2_1 .img:nth-of-type(6) {
  background-image: url('../../Images/pp6.jpeg');
  background-position: center;
}

#c2_1 .img:nth-of-type(7) {
  background-image: url('../../Images/pp13.jpeg');
  background-position: center;
}

#c2_1 .img:nth-of-type(8) {
  background-image: url('../../Images/pp8.jpeg');
  background-position: center;
}

#c2_1 .img:nth-of-type(9) {
  background-image: url('../../Images/pp14.jpeg');
  background-position: center;
}

#c2_1 .img:before {
  content: '';
  position: absolute;
  height: 0vh;
  width: 0%;
  z-index: 4;
  top: 0;
  left: 0;
  border-right: 1px solid black;
}

/* Gallery responsive */
@media (max-width: 800px) {
  #c2_1 section {
    grid-template-columns: repeat(2, 1fr);
    padding: 2px;
  }

  #c2_1 .img:nth-of-type(7) {
    display: none;
  }
}