/* ============================================================
   Our Community - 커뮤니티 첫 화면 맨 위
   ------------------------------------------------------------
   왼쪽에 큰 한 칸, 오른쪽에 두 줄씩 세 칸.

   카드 한 장과 제목 줄은 FeatureCards.css 에 있다. 여기 있는 것은
   이 화면의 격자뿐이다.
   ============================================================ */

/* 큰 칸이 왼쪽 절반쯤, 오른쪽이 나머지.

   1.05fr 인 까닭은 오른쪽에 두 기둥이 서기 때문이다. 정확히 반씩 나누면
   오른쪽 한 칸이 사진 폭(116px)을 빼고 나면 글 자리가 너무 좁아져 제목이
   석 줄로 흐른다. 왼쪽을 아주 조금 양보하면 두 기둥이 편해진다. */
.commfeat {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 24px;
}

/* 큰 칸은 제 키대로 선다. 늘리면 사진 아래에 빈 자리가 생긴다.
   그래서 줄의 높이는 이 칸이 정하고, 오른쪽이 거기에 맞춘다. */
.commfeat-lead { align-self: start; }

/* 오른쪽의 두 기둥.

   minmax(0, 1fr) 이지 1fr 이 아니다 - 1fr 은 '적어도 내용만큼'이라는
   뜻이라, 끊어지지 않는 긴 낱말이 든 칸 하나가 제 기둥을 넓혀 둘이
   어긋난다.

   줄 높이를 1fr 로 두는 까닭은 높이를 맞추기 위해서다. 이 상자는
   왼쪽 큰 칸만큼 늘어나고(격자의 기본이 stretch 다), 그 높이를 줄들이
   똑같이 나눠 가진다. 그래서 줄 사이가 저절로 고르게 벌어지고 마지막
   줄의 아래끝이 큰 칸의 아래끝과 만난다. 줄 수는 들어온 개수에 따라
   달라지므로 이름으로 함께 받는다. */
.commfeat-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
}

.commfeat-rows.is-rows-2 { grid-template-rows: repeat(2, 1fr); }
.commfeat-rows.is-rows-3 { grid-template-rows: repeat(3, 1fr); }
.commfeat-rows.is-rows-4 { grid-template-rows: repeat(4, 1fr); }

/* ---------- 좁은 화면 ----------
   큰 칸이 위, 줄들이 그 아래. 두 기둥은 유지한다 - 한 줄로 세우면
   스크롤만 길어진다. */
@media (max-width: 991px) {
    .commfeat {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* 위아래로 풀리면 맞출 상대가 없다. 줄들은 제 키대로 서고 사이만
       띄운다 - 늘린 채로 두면 줄 사이가 까닭 없이 벌어진다. */
    .commfeat-rows.is-rows-2,
    .commfeat-rows.is-rows-3,
    .commfeat-rows.is-rows-4 {
        grid-template-rows: none;
        row-gap: 16px;
    }
}

@media (max-width: 640px) {
    .commfeat-rows { grid-template-columns: 1fr; }
}