.fg-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.fg-item { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s; }
.fg-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.fg-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; border: none; }
.fg-caption { padding: 8px 10px; font-size: 0.95em; background: #fafafa; }
.fg-lb-thumb { height: 60px; width: 60px; object-fit: cover; border-radius: 4px; margin: 0 4px; border: 2px solid transparent; cursor: pointer; transition: border .2s; }
.fg-lb-thumb-active { border-color: #0078d4; }
.fg-lightbox-overlay { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; }
.fg-lightbox-overlay[aria-hidden="false"] { display: flex; }
.fg-lb-main { background: #222; border-radius: 10px; padding: 24px 24px 16px 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); max-width: 96vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.fg-lb-img-wrap { max-width: 80vw; max-height: 60vh; overflow: hidden; border-radius: 8px; background: #111; }
.fg-lb-img { max-width: 100%; max-height: 60vh; display: block; margin: 0 auto; border-radius: 8px; }
.fg-lb-title, .fg-lb-counter { color: #fff; margin: 8px 0 0 0; text-align: center; }
.fg-lb-thumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 12px 0 0 0; padding: 0 8px; }
.fg-lb-close, .fg-lb-prev, .fg-lb-next { position: absolute; top: 24px; background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.5em; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.fg-lb-close { right: 32px; }
.fg-lb-prev { left: 32px; top: 50%; transform: translateY(-50%); }
.fg-lb-next { right: 32px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
.fg-gallery { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fg-lb-main { padding: 8px; }
.fg-lb-img-wrap { max-width: 96vw; max-height: 40vh; }
}