.banner-slot {
	display: flex;
	justify-content: center;
	margin: 1.5rem auto;
}

.banner-slot img {
	display: block;
	max-width: 100%;
	height: auto;
}

.banner-slot__link {
	display: inline-block;
}

.banner-slider__slide .banner-slot__link {
	display: block;
	width: 100%;
	height: 100%;
}

/* Banner dentro da coluna de conteúdo: ocupa a largura toda, alinhado à grade */
.layout__main .banner-slot {
	display: block;
}

.layout__main .banner-block {
	padding-top: 2.875rem;
}

.layout__main .banner-block .banner-slot {
	padding-top: 3.3rem;
}

.layout__main .banner-slot .banner-slot__link {
	display: block;
	width: 100%;
}

.layout__main .banner-slot img {
	width: 100%;
	height: auto;
}

.banner-slot--topo,
.banner-slot--rodape,
.banner-slot--topo-2,
.banner-slot--home-1,
.banner-slot--home-2,
.banner-slot--home-3,
.banner-slot--home-conteudo {
	width: 100%;
	max-width: 1190px;
}

.banner-slot--vertical {
	max-width: 300px;
}

.banner-slot--lateral {
	max-width: 300px;
}

.banner-slot--lateral-2,
.banner-slot--lateral-3 {
	max-width: 300px;
}

.banner-slot--post-fim {
	width: 100%;
	max-width: 728px;
	margin-left: auto;
	margin-right: auto;
}

.banner-slot--vertical {
	max-width: 250px;
}

.banner-slot--conteudo {
	max-width: 336px;
}

.banner-slider {
	position: relative;
	width: 100%;
}

.banner-slider__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: var(--banner-ratio, 728 / 90);
	background: #f2f2f2;
	overflow: hidden;
}

.banner-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.banner-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.banner-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.banner-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.banner-slider:hover .banner-slider__btn,
.banner-slider__btn:focus-visible {
	opacity: 1;
}

.banner-slider__btn--prev {
	left: 8px;
}

.banner-slider__btn--next {
	right: 8px;
}

.banner-slider__dots {
	display: flex;
	gap: 0.3rem;
	justify-content: center;
	margin-top: 0.45rem;
}

.banner-slider__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c9c9c9;
	cursor: pointer;
}

.banner-slider__dot.is-active {
	background: #111;
}
