.arc-images-lens{
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	background: transparent;
	overflow: visible;
}

.arc-images-stage{
	display: grid;
	grid-template-columns: 1fr;
	gap: 75px;
	width: min(100%, 460px);
	margin: 45px auto;
}

.arc-images-figure{
	position: relative;
	margin: 0;
	min-width: 0;
	overflow: visible;
	width: 420px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.arc-images-stage .arc-images-figure:first-child{
	width: 460px;
}

.arc-images-img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;

	-webkit-mask-image: radial-gradient(
		ellipse at center,
		black 88%,
		transparent 100%
	);
	mask-image: radial-gradient(
		ellipse at center,
		black 88%,
		transparent 100%
	);
}

.arc-images-text{
	display: none;
	position: relative;
	width: calc(100% + 60px);
	margin: 18px 0 0 -30px;
	padding: 1rem 1.25rem 1.25rem;
	box-sizing: border-box;
	border-radius: var(--arc-border-radius);
}

.arc-images-text::before{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		ellipse at 50% 35%,
		var(--arc-glow-inner-brighter) 0%,
		var(--arc-glow-inner) 30%,
		rgba(255, 255, 255, 0) 75%
	);
	pointer-events: none;
}

.arc-images-figure.is-text-visible .arc-images-text{
	display: block;
	animation: arcImagesTextReveal 350ms ease;
}

html.aop-images-captions-on .arc-images-text{
	display: block;
	animation: arcImagesTextReveal 350ms ease;
}

@keyframes arcImagesTextReveal{
	from{
		opacity: 0;
		transform: translateY(-4px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

.arc-images-text-title{
	position: relative;
	text-align: center;
	font-size: 0.82rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.68;
}

.arc-images-text-meta{
	position: relative;
	margin-top: 0.15rem;
	text-align: center;
	font-size: 0.78rem;
	line-height: 1.5;
	opacity: 0.55;
}

.arc-images-text-about{
	position: relative;
	width: 88%;
	margin: 0.9rem auto 0;
	font-size: 0.9rem;
	line-height: 1.65;
	font-weight: 500;
}

.arc-images-text-about p{
	text-wrap: wrap;
}

@media (max-width: 600px) {

	.arc-images-stage {
		width: calc(100% - 32px);
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
	}

	.arc-images-figure,
	.arc-images-stage .arc-images-figure:first-child {
		width: 100%;
		max-width: 100%;
	}

	.arc-images-text {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}