/* ============================================================
   구인/구직 첫 화면 맨 위 - 세 줄 세 칸
   ------------------------------------------------------------
   카드 한 장과 제목 줄은 FeatureCards.css 에 있다. 여기 남은 것은
   이 화면의 격자와 칸을 가르는 선뿐이다.

   업소록의 Business Event 와 달리 사진을 크게 쓰지 않는다. 저쪽은
   배너라 사진이 곧 내용이지만, 구인 글에 붙는 사진은 업소 로고라
   그 자체로는 무슨 일자리인지 말해 주지 않는다. 읽히는 것은 제목이므로
   사진은 옆에 작게 두고 제목에 자리를 준다.
   ============================================================ */

/* minmax(0, 1fr) 이지 1fr 이 아니다. 1fr 은 '적어도 내용만큼'이라는
   뜻이라, 끊어지지 않는 긴 낱말이 든 칸 하나가 제 기둥을 넓혀 셋이
   어긋난다 - 실제로 첫 기둥이 456px, 둘째가 300px 로 벌어졌다. */
.jobfeat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
}

/* 아홉 칸이 격자에 떠 있는 것처럼 보이지 않게 칸마다 아래 선을 둔다. */
.jobfeat .feat-card {
    padding-bottom: 16px;
    border-bottom: 1px solid #eeeeee;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 991px) {
    .jobfeat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
}

@media (max-width: 640px) {
    .jobfeat { grid-template-columns: 1fr; }
    .jobfeat .feat-card.is-row .feat-thumb { flex-basis: 96px; }
}