/**
 * Recognition & Credentials – Gallery (ratio-based layout via JS)
 * Left: hero portrait. Right: top landscape, bottom portrait.
 * Border: our gold style. No extra padding.
 */

.fg-gallery {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 12px;
  min-height: 0;
}

.fg-left,
.fg-right {
  display: flex;
  overflow: hidden;
}

.fg-right {
  flex-direction: column;
  gap: 12px;
}

.fg-gallery a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
}

.fg-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 2px solid rgba(184, 152, 82, 0.4);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-gallery a:hover img {
  border-color: rgba(184, 152, 82, 0.7);
  box-shadow: 0 0 20px rgba(184, 152, 82, 0.2);
}

.fg-left img {
  border-width: 3px;
}

/* Mobile: same layout (left + right), full width, smaller gap */
@media (max-width: 575px) {
  .fg-gallery {
    gap: 8px;
  }

  .fg-right {
    gap: 8px;
  }
}