body 
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      max-width: 1040px;
      margin: auto;
      justify-content: center;
    }
    .gallery-member {
      background: #fff;
      border-radius: 6px;
      padding: 16px 10px 10px 10px;
      box-shadow: 0px 4px 12px rgba(0,0,0,0.07);
      width: 310px;
      margin-bottom: 20px;
      text-align: center;
    }
    .gallery-img {
      width: 1300px;
      height: auto;
      object-fit: cover;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 12px;
      box-shadow: 0 3px 11px rgba(0,0,0,0.11);
      transition: transform .24s;
    }
    .gallery-img:hover {
      transform: scale(1.04);
    }
    .position {
      color: #888;
      font-size: 1rem;
      margin-bottom: 4px;
    }
    .name h3 {
      color: #123;
      font-size: 1.18rem;
      margin: 0;
      font-weight: 600;
    }
    /* Lightbox styles */
    #lightbox {
      display: none; 
      position: fixed; left:0; top:0; width:100vw; height:100vh; 
      background: rgba(0,0,0,0.88); 
      justify-content: center; align-items: center; 
      z-index: 123456;
    }
    #lightbox-img {
      max-width:90vw; 
      max-height:80vh;
      border-radius:10px;
      box-shadow:0 0 18px rgba(0,0,0,0.4);
      padding: 10px;
      background-color: #fff;
    }

    #close-btn {
      position: absolute; 
      top: 30px; right: 32px;
      font-size: 2.8rem; 
      background: #000;
      border: 2px solid #fff;
      border-radius: 50%;
      width: 48px;
      height: 48px;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 0 8px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;

    }
    @media (max-width: 1000px) {
      .gallery-member { width: 47vw; }
      .gallery-img { width: 95%; }
    }
    @media (max-width: 700px) {
      .gallery { gap: 10px; }
      .gallery-member, .gallery-img { width: 95vw; }
    }