#visul , #banner { position: relative; }

.banner-class.main-slider { width: 100%; overflow: hidden; }

.banner-class .item { position: relative; height: 100%; }
.banner-class .item>a { position: relative; display: block; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; isolation: isolate; }
.banner-class .item>a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(24, 19, 33, .55) 0%, rgba(24, 19, 33, .15) 50%, rgba(24, 19, 33, .55) 100%); z-index: 0; }

.banner-class .item>a::after { content: ""; position: absolute; left: -15%; bottom: -30%; width: 60%; height: 80%; background: radial-gradient(ellipse at center, rgba(123, 72, 166, .35), transparent 60%); filter: blur(30px); z-index: 0; pointer-events: none; }

.banner-class .art { position: absolute; inset: auto 0 12% 0; max-width: 1200px; margin: 0 auto; padding: 0 24px; z-index: 1; color: var(--wf-text); }
.banner-class .art h2 { font-size: clamp(24px, 3.8vw, 48px); line-height: 1.15; margin: 0 0 .4em; font-weight: 800; text-shadow: 0 6px 24px var(--wf-shadow); }
.banner-class .art p { max-width: 740px; font-size: clamp(14px, 1.7vw, 18px); line-height: 1.7; margin: .25em 0 1em; color: var(--wf-muted); }
.banner-class .art .cta { display: inline-block; padding: .75em 1.2em; border-radius: 12px; background: linear-gradient(135deg, var(--wf-brand), var(--wf-brand-2)); color: #fff; font-weight: 700; box-shadow: 0 10px 24px rgba(91, 44, 131, .35); transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
.banner-class .art .cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(91, 44, 131, .45); }

.banner-class .item img { aspect-ratio: 21/7; }

@media (max-width:1440px) {
	.banner-class .item img { aspect-ratio: 21/9; }
}
@media (max-width:1280px) {
	.banner-class .item img { aspect-ratio: 16/9; }
}
@media (max-width:768px) {
	.banner-class .item img { aspect-ratio: 4/3; }
}
@media (max-width:640px) {
	.slick-prev, .slick-next { width: 40px; height: 40px; border-radius: 10px; }
	.slick-prev { left: 8px; }
	.slick-next { right: 8px; }
	.slick-dots { bottom: 10px; }
	.banner-class .art { inset: auto 0 10% 0; text-align: center; }
	.banner-class .art p { margin-left: auto; margin-right: auto; }
}
@media (max-width:550px) {
	.banner-class .item img { aspect-ratio: 3/4; }
}