[data-clickingmad-header] {
	position: relative;
}

[data-clickingmad-header] .slides-content-wrapper {
	display: grid;
}

[data-clickingmad-header] .slide-content {
	grid-area: 1 / 1;

	opacity: 0;
	pointer-events: none;

	transition: opacity 0.5s ease-in-out;
}

[data-clickingmad-header] .slide.shown .slide-content,
[data-clickingmad-header] .slide-content.shown {
	opacity: 1;
	pointer-events: all;
}

.slides-wrapper {
	display: flex;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.slides-wrapper .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;

	/* Should this be moved into its own class? Possibly use a CSS variable? */
	/* That way we can share the transition between slides and slide content (when rendered outside the wrapper). */
	transition: opacity 0.5s ease-in-out;

	pointer-events: none;
}

.slides-wrapper .slide picture,
.slides-wrapper .slide img {
	display: block;
	width: 100%;
	height: 100%;
}

.slides-wrapper .slide.shown {
	opacity: 1;
	pointer-events: all;
}

.pagination.external,
.slides-wrapper .pagination {
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	/*pointer-events: all;*/
}

.slides-wraper .overlay {
	width: 100%;
	height: 100%;
	z-index: 1;
}

.slides-wrapper button.back {
	position: absolute;
	top: 50%;
	left: 24px;
	transform: translateY(-50%);
	display: flex;
	cursor: pointer;
	pointer-events: all;
	border: 0;
	background: none;
	padding: 0;
}

.slides-wrapper button.back .inner {
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	cursor: pointer;
	border-right: 21px solid #333;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	opacity: 0.3;
	padding: 0;
}

.slides-wrapper button.next {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	display: flex;
	cursor: pointer;
	pointer-events: all;
	display: flex;
	border: 0;
	background: none;
	padding: 0;
}

.slides-wrapper button.next .inner {
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	cursor: pointer;
	border-left: 21px solid #333;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	opacity: 0.3;
}

.pagination.external .back:hover,
.pagination.external .next:hover,
.slides-wrapper .pagination .back:hover,
.slides-wrapper .pagination .next:hover {
	opacity: 1;
}

.slides-wrapper .pagination .dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
	display: inline-block;
}

.pagination.external .dots .dot,
.slides-wrapper .pagination .dots .dot {
	pointer-events: all;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #ccc;
	margin: 0 5px;
	cursor: pointer;
	display: inline-block;
}

.pagination.external .dots .dot.active,
.slides-wrapper .pagination .dots .dot.active {
	background-color: #000;
}

.slides-wrapper .slide .slide-content {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}