.aurum-event-banners {
	max-width: 1320px;
}

.aurum-event-banners__viewport {
	width: 100%;
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
}

/*
 * 디졸브(크로스페이드) 전환.
 * 모든 슬라이드를 같은 그리드 셀에 겹쳐 놓고 opacity 로만 전환한다.
 * 트랙 높이는 가장 큰 슬라이드 높이를 따르므로 전환 중 레이아웃이 흔들리지 않는다.
 * 전환 시간(600ms)은 frontend.js 의 transitionDuration 과 맞춘다.
 *
 * 숨김(opacity 0) 규칙은 JS 초기화 후(.is-initialized)에만 적용한다.
 * 초기화 전·JS 미동작 시에는 서버 마크업대로 첫 슬라이드만 보이고
 * 나머지는 hidden 속성(display: none)으로 감춰진다.
 */
.aurum-event-banners__track {
	display: grid;
	width: 100%;
}

.aurum-event-banners__slide {
	grid-area: 1 / 1;
	min-width: 0;
}

.aurum-event-banners.is-initialized .aurum-event-banners__slide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 600ms ease, visibility 0s linear 600ms;
}

.aurum-event-banners.is-initialized .aurum-event-banners__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
	transition: opacity 600ms ease, visibility 0s linear 0s;
}

.aurum-event-banners__link,
.aurum-event-banners__picture,
.aurum-event-banners__image {
	display: block;
	width: 100%;
	height: 100%
}

.aurum-event-banners .aurum-event-banners__image {
	height: 100%;
	pointer-events: none;
}

.aurum-event-banners.is-initialized {
	cursor: grab;
}

.aurum-event-banners.is-initialized:active {
	cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
	.aurum-event-banners.is-initialized .aurum-event-banners__slide,
	.aurum-event-banners.is-initialized .aurum-event-banners__slide.is-active {
		transition-duration: 1ms, 0s;
		transition-delay: 0s, 1ms;
	}
}