/* Galería previa (usa la que ya tienes) */
.gallery-v4,.gallery-v5,.gallery-v6,.gallery-v7,
.gallery-v8,.gallery-v9,.gallery-v10 {
  background-color: #03a8f400;
  display: grid;
  grid-template-areas:
    /*Pasacalle-principal*/    
    "area4 area4 area4 area4"
    "area5 area5 area6 area6"
    "area5 area5 area9 area9"
    "area7 area8 area9 area9"
    /*Prevencion its*/
    "area10 area10 area11 area11"
    "area10 area10 area12 area12"
    /*salud deabetes*/
    "area13 area14 area16 area15"
    "area13 area17 area17 area15"
    "area13 area17 area17 area15"
    /*simulacro muni*/
    "area20 area21 area19 area19"
    "area22 area18 area18 area23"
    "area22 area18 area18 area23"
    /*aniversario saullana*/
    "area30 area25 area25 area26"
    "area24 area25 area25 area26"
    "area24 area29 area27 area26"
    "area24 area29 area27 area28"
    /*crecimineto y desarrollo del niño*/
    "area31 area32 area32 area33"
    "area31 area34 area34 area33"
    "area35 area35 area36 area36"; /* Las nuevas imágenes: 2 columnas */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 20px;
}
.item img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}
.section-title {
  text-align: center;
  font-size: 2rem;
  color: #03a9f4;

}

.item img:hover {
  transform: scale(1.02);
}

.item-4 { grid-area: area4; height: 700px; }
.item-5 { grid-area: area5; height: 400px; }
.item-6 { grid-area: area6; height: 250px; }
.item-7 { grid-area: area7; height: 300px; }
.item-8 { grid-area: area8; height: 300px; }
.item-9 { grid-area: area9; height: 450px; }




.item-10 { grid-area: area10; height: 620px; }
.item-11 { grid-area: area11; height: 400px; }
.item-12 { grid-area: area12; height: 200px; }


.item-13 { grid-area: area13; height: 670px; }
.item-14 { grid-area: area14; height: 250px; }
.item-15 { grid-area: area15; height: 670px; }
.item-16 { grid-area: area16; height: 250px; }
.item-17 { grid-area: area17; height: 400px; }



.item-18 { grid-area: area18; height: 400px; }
.item-19 { grid-area: area19; height: 300px; }
.item-20 { grid-area: area20; height: 300px; }
.item-21 { grid-area: area21; height: 300px; }
.item-22 { grid-area: area22; height: 400px; }
.item-23 { grid-area: area23; height: 400px; }



.item-24 { grid-area: area24; height: 600px; }
.item-25 { grid-area: area25; height: 500px; }
.item-26 { grid-area: area26; height: 600px; }
.item-27 { grid-area: area27; height: 300px; }
.item-28 { grid-area: area28; height: 200px; }
.item-29 { grid-area: area29; height: 300px; }
.item-30 { grid-area: area30; height: 200px; }
.item-31 { grid-area: area31; height: 600px; }
.item-32 { grid-area: area32; height: 300px; }
.item-33 { grid-area: area33; height: 600px; }
.item-34 { grid-area: area34; height: 280px; }

.item-35 { grid-area: area35; height: 400px; }
.item-36 { grid-area: area36; height: 400px; }


/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
  animation: zoomIn 0.4s;
}

@keyframes zoomIn {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

/* Responsive modal */
@media (max-width: 768px) {
  .gallery-v4,.gallery-v5,.gallery-v6,.gallery-v7,.gallery-v8,.gallery-v9,.gallery-v10 {
    grid-template-areas:
      "area4"
      "area5"
      "area6"
      "area7"
      "area8"
      "area9"
      "area10"
      "area11"
      "area12"
      "area13"
      "area14"
      "area15"
      "area16"
      "area17"
      "area18"
      "area19"
      "area20"
      "area21"
      "area22"
      "area23"
      "area24"
      "area25"
      "area26"
      "area27"
      "area28"
      "area29"
      "area30"
      "area31"
      "area32"
      "area33"
      "area34"
      "area35"
      "area36";
    grid-template-columns: 1fr;
  }
.gallery-v4.section-title{
  margin-top: -50%;
}

  .item {
    height: 200px;
  }
}