.gallery-placeholder {
  padding: 80px 8vw;
  background: #fff;
}

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

.gallery-heading h2 {
  margin: 0;
  color: #133047;
  font: 500 clamp(32px, 4vw, 52px)/1.1 Oswald, Arial, sans-serif;
  text-transform: uppercase;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: #f7f9f9;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}

.gallery-card:hover,
.gallery-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px #13304722;
  outline: none;
}

.gallery-image {
  min-height: 210px;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #aebfc4, #dce6e8);
  color: #133047;
  text-align: center;
}

.gallery-card-2 .gallery-image { background: linear-gradient(135deg, #7d969c, #c4d1d2); }
.gallery-card-3 .gallery-image { background: linear-gradient(135deg, #b4a38e, #ded8c9); }
.gallery-card-4 .gallery-image { background: linear-gradient(135deg, #8aa8ae, #d6e2e3); }
.gallery-card-5 .gallery-image { background: linear-gradient(135deg, #6d8580, #bdcfc8); }
.gallery-card-6 .gallery-image { background: linear-gradient(135deg, #718793, #d4d8ce); }

.gallery-image span {
  padding: 8px 12px;
  border: 1px solid #13304766;
  font: 500 18px Oswald, Arial, sans-serif;
  text-transform: uppercase;
}

.gallery-caption {
  display: block;
  padding: 12px 14px;
  color: #65757c;
  font-size: 12px;
}

.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; padding: 40px; background: #071923ee; }
.lightbox-content { grid-column: 2; text-align: center; }
.lightbox-placeholder { min-height: 60vh; display: grid; place-items: center; background: linear-gradient(135deg, #e9f1f4, #9eb0b7); color: #133047; font: 500 clamp(26px, 5vw, 58px) Oswald, Arial, sans-serif; text-transform: uppercase; }
.lightbox-content p { margin: 14px 0 0; color: #fff; }
.lightbox-close, .lightbox-prev, .lightbox-next { border: 0; background: transparent; color: #fff; font-size: 48px; cursor: pointer; }
.lightbox-close { position: absolute; top: 14px; right: 22px; }
.lightbox-prev { grid-column: 1; }
.lightbox-next { grid-column: 3; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: #b9d0db; }

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

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

@media (max-width: 600px) {
  .lightbox { grid-template-columns: 42px minmax(0, 1fr) 42px; padding: 24px 8px; }
  .lightbox-placeholder { min-height: 50vh; }
}