/*
 * banner.css — 상세 중간 배너
 *
 * 이미지는 원본 비율 그대로 폭 100%. aspect-ratio 로 자르지 않는다.
 * radius 는 --c4-radius-banner(8) — 이미지 radius(20)와 다르다.
 */

.c4-banner {
	margin-top: var(--c4-single-gap-banner);
}

.c4-banner__link {
	display: block;
	border-radius: var(--c4-radius-banner);
}

.c4-banner__img {
	width: 100%;
	height: auto;
	border-radius: var(--c4-radius-banner);
}

/* ≥768 — PC 그림만 */
.c4-banner__img--mo {
	display: none;
}

/* 한쪽 이미지만 등록된 경우 — 블록 전체를 그 뷰포트에서 뺀다(빈 블록이 간격을 차지하지 않게). */
@media (min-width: 768px) {
	.c4-banner--no-pc {
		display: none;
	}
}

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

	.c4-banner__img--mo {
		display: block;
	}

	.c4-banner--no-mo {
		display: none;
	}
}