/* ============================================================
   Project CMS Grid (nested 12col-safe, no extra side padding)
   - 바깥에 이미 data-grid-container / .wf-grid가 있는 경우용
   - 이 안쪽 그리드는 패딩을 다시 만들지 않는다
   - 현재 [webflow - big section template에 삽입된 코드임 251105]
   ============================================================ */

/* 1) CMS 컬렉션 리스트 래퍼에 붙일 클래스: `project-cms-grid` */
.project-cms-grid[data-grid-container] {
  /* 바깥 12col 컨테이너 패딩 재적용 방지 */
  padding-inline: 0;
  --wf-grid-padding-block: 0;
}

.project-cms-grid {
  /* 바깥 그리드에서 내려온 변수 사용 */
  --_cols: var(--wf-grid-active-columns, 12);
  --_gap: var(--wf-grid-active-gutter, 1.5rem);

  display: grid;
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  column-gap: var(--_gap);
  row-gap: var(--wf-grid-active-row-gap, var(--_gap));

  /* 중첩 그리드일 때 가장 문제되는 부분: 좌우 패딩 다시 생기는 것 → 0 처리 */
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

/* 2) Webflow가 자동으로 끼워넣는 중간 래퍼를 투명하게 만들어
      각 item이 직접 그리드 자식처럼 행동하게 함 */
.project-cms-grid .w-dyn-items {
  display: contents;
}

/* 4) 아이템 안의 이미지 기본값 */
.project-cms-grid .w-dyn-item {
  width: 100%;
}

.project-cms-grid .w-dyn-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 5) 모바일일 때도 패딩을 다시 만들지 않음 */
@media (max-width: 767.98px) {
  .project-cms-grid {
    padding-left: 0;
    padding-right: 0;
  }
}