<!-- 이미지 2x2 그리드: 4장 이미지 격자 배치 -->
<!--
  📋 image-grid-2x2
  ─────────────────
  용도: 현장 사진 4장, 참고 이미지 4장, 사례 이미지 갤러리
  슬롯: images[] (4개, 각각 src, alt, caption)
  Figma 원본: 2-1_03 GIS 항공/위성/현장 사진
-->
<div class="block-img-2x2">
  {% for img in images %}
  <div class="ig-item">
    <img src="{{ img.src }}" alt="{{ img.alt | default('') }}">
    {% if img.caption %}<div class="ig-caption">{{ img.caption }}</div>{% endif %}
  </div>
  {% endfor %}
</div>

<style>
.block-img-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ig-item {
  overflow: hidden;
  border-radius: 6px;
}
.ig-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--color-bg-subtle, #f8fafc);
}
.ig-caption {
  font-size: 11px;
  color: #64748b;
  text-align: center;
  padding: 4px;
  background: #f8f9fb;
}
</style>
