.article-gallery {
	box-sizing: border-box;
	clear: both;
	margin: 2rem 0;
}

.article-gallery__title {
	margin-bottom: .75rem;
}

.article-gallery__subtitle {
	margin: 0 0 1rem;
	line-height: 1.6;
}

.article-gallery__slider {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.article-gallery__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 5px;
	background: #f5f7f9;
	touch-action: pan-y;
	user-select: none;
	cursor: grab;
}

.article-gallery__viewport.is-dragging {
	cursor: grabbing;
}

.article-gallery--single .article-gallery__viewport {
	cursor: default;
	touch-action: auto;
}

.article-gallery__viewport:focus-visible {
	outline: 2px solid #00508d;
	outline-offset: 3px;
}

.article-gallery__track {
	display: flex;
	align-items: stretch;
	transition: transform 700ms ease;
	will-change: transform;
}

.article-gallery__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: center;
}

	.article-gallery__media {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(70vh, 520px);
	margin: 0 auto;
	object-fit: contain;
}

.article-gallery__media--video {
	background: #111;
}

.article-gallery__caption {
	padding: .75rem 1rem;
	font-size: .95em;
	line-height: 1.5;
	text-align: center;
}

.article-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid #00508d;
	border-radius: 50%;
	background: rgba(0, 80, 141, .9);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.article-gallery__arrow:hover,
.article-gallery__arrow:focus-visible {
	background: #003f6d;
}

.article-gallery__arrow:focus-visible,
.article-gallery__dot:focus-visible {
	outline: 2px solid #00508d;
	outline-offset: 3px;
}

.article-gallery__arrow--prev {
	left: 1rem;
}

.article-gallery__arrow--next {
	right: 1rem;
}

.article-gallery__arrow svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.article-gallery__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin: .75rem 0 0;
}

.article-gallery__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #00508d;
	cursor: pointer;
	opacity: .3;
	transition: opacity .2s ease, transform .2s ease;
}

.article-gallery__dot.is-active,
.article-gallery__dot[aria-current="true"] {
	opacity: 1;
	transform: scale(1.15);
}

@media (max-width: 767px) {
	.article-gallery {
		margin: 1.5rem 0;
	}

	.article-gallery__slider {
		margin-right: auto;
		margin-left: auto;
	}

	.article-gallery__arrow {
		width: 38px;
		height: 38px;
	}

	.article-gallery__arrow--prev {
		left: .5rem;
	}

	.article-gallery__arrow--next {
		right: .5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.article-gallery__track,
	.article-gallery__arrow,
	.article-gallery__dot {
		transition-duration: .01ms;
	}
}
