/* ==========================================================================
   sections/banner.css — 중간 배너
   --------------------------------------------------------------------------
   ★★ **원본 비율 그대로 폭 100%.** `aspect-ratio` 로 자르지 말 것 —
      고정 크롭(5:3)은 카드 썸네일에만 해당한다(DESIGN-TOKENS §3-6).
      시안의 900/185 · 900/245 는 **권장 업로드 비율 안내용**이지 CSS 로 강제할 값이 아니다.
      강제하면 구매자가 다른 비율 그림을 올렸을 때 잘려 나간다.

   ★ radius 는 8(`--c4-radius-banner`)이다. 대표 이미지·카드 썸네일의 20 과 다르며
     하나로 통일하지 말 것(§3-7).
   ========================================================================== */

.c4-banner__link {
	display: block;
}

.c4-banner__img,
.c4-banner picture,
.c4-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--c4-radius-banner);
}

/* ==========================================================================
   한쪽 뷰포트 이미지만 설정된 경우 — 그 뷰포트에서만 보인다
   --------------------------------------------------------------------------
   ★ 둘 다 설정돼 있으면 PHP 가 <picture> 로 묶어 **한 장만 내려받게** 한다.
     그때는 아래 두 규칙에 걸리는 클래스가 붙지 않는다.
   ★ 기준선 768 은 <picture> 의 `media` 속성(PHP `c4_bp('base')`)과 **같은 값이어야 한다.**
     한쪽만 고치면 특정 폭 구간에서 그림이 바뀌지 않는데 에러는 나지 않는다.
   ========================================================================== */

@media (max-width: 767.98px) {
	.c4-banner--pc-only { display: none; }
}

@media (min-width: 768px) {
	.c4-banner--mo-only { display: none; }
}