#page-banner {
	--background-color: #f6f7f9;
	--gradient-color-start: #edeef2;
	--gradient-color-end: #f6f7f9;
	--border-radius: 30px;

	margin-bottom: 30px;
}

#page-banner .swiper {
	border-radius: var(--border-radius);
}

#page-banner .swiper-wrapper,
#page-banner .swiper-slide {
	width: 100%;
}

#page-banner .swiper-nav {
	width: 60px;
	height: 60px;
}

#page-banner .swiper-nav::before {
	content: unset;
}

#page-banner .swiper-slide {
	border-radius: var(--border-radius);
}

#page-banner .swiper-slide picture {
	display: flex;
	aspect-ratio: 2.6 / 1;
}

#page-banner .swiper-slide picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--border-radius);
}

@keyframes shimmer {
	0% {
		background-position: -1170px 0;
	}
	100% {
		background-position: 1170px 0;
	}
}

#page-banner .page-banner__slide--loading {
	position: relative;
	overflow: hidden;
	background: var(--background-color);
	background-image: linear-gradient(
		to right,
		var(--background-color) 0%,
		var(--gradient-color-start) 20%,
		var(--background-color) 40%,
		var(--gradient-color-end) 100%
	);
	background-repeat: no-repeat;
	animation: shimmer 1s linear infinite forwards;
}

@media screen and (max-width: 767px) {
	#page-banner {
		--border-radius: 12px;

		padding: 0;
	}

	#page-banner .swiper {
		border-radius: unset;
	}

	#page-banner .swiper-slide picture {
		aspect-ratio: 1 / 1;
	}

	#page-banner .swiper-nav {
		display: none;
	}
}