/* ============================================================
   Business Event - 한인업소록 첫 화면 맨 위
   ------------------------------------------------------------
   왼쪽 둘 · 가운데 큰 하나 · 오른쪽 둘.

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

/* 가운데가 2.4 인 것은 눈대중이 아니다. 사진이 모두 16:9 이므로 칸의
   높이는 폭에서 그대로 따라 나오고, 제목은 두 줄로 묶여 있으므로 높이가
   정해져 있다. 옆 기둥은 칸이 둘이고 가운데는 하나이니, 가운데 폭이 옆의
   두 배보다 조금 넓어야 아래끝이 같은 자리에서 만난다. */
.bizevent {
    display: grid;
    grid-template-columns: 1fr 2.4fr 1fr;
    gap: 14px;
    align-items: stretch;
}

/* space-between: 남는 자리가 생기면 두 칸 사이로 흩어 놓아 아래 칸의
   아래끝이 기둥 바닥에 닿게 한다. 늘려서 채우면 사진 비율이 깨진다. */
.bizevent-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.bizevent-lead { display: flex; }
.bizevent .feat-card { width: 100%; }

/* 옆 기둥의 제목은 조금 작다. */
.bizevent-side .feat-title { font-size: 13.5px; }

/* ---------- 좁은 화면 ----------
   세 기둥이 서기에 좁아지면 두 칸씩 흐른다. 큰 칸이 먼저 오도록 순서를
   돌린다 - 문서에서는 왼쪽 기둥이 먼저 적혀 있다. */
@media (max-width: 991px) {
    .bizevent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bizevent-lead { order: -1; grid-column: 1 / -1; }
    .bizevent-side { display: contents; }
    .bizevent .feat-card.is-lead .feat-title { font-size: 16px; }
}

@media (max-width: 560px) {
    .bizevent { grid-template-columns: 1fr; }
    .bizevent-side .feat-title { font-size: 14px; }
}