/**
 * Education program gallery — heading plus peeking photo row.
 */

.program-gallery {
	--program-gallery-pad: 3.75rem;
	--program-gallery-intro-gap: 1.8125rem;
	--program-gallery-heading-size: var(--type-h2-size);
	--program-gallery-slide-width: 38.8125rem;
	--program-gallery-radius: 0.75rem;

	padding-block: var(--program-gallery-pad);
	color: var(--color-navy);
	background-color: var(--color-white);
	overflow: hidden;
}

.program-gallery__intro {
	width: 100%;
	max-width: calc(var(--container-narrow-max) + (2 * var(--container-gutter)));
	margin-inline: auto;
	margin-block-end: var(--program-gallery-intro-gap);
	padding-inline: var(--container-gutter);
	box-sizing: border-box;
}

.program-gallery__heading {
	margin: 0;
	padding-block-end: 1.125rem;
	border-bottom: 0.5px solid var(--color-light-outline);
	font-family: var(--font-family-display);
	font-size: var(--program-gallery-heading-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-navy);
}

.program-gallery__swiper {
	width: 100%;
	margin-inline: 0;
	padding-inline: 0.625rem;
	box-sizing: border-box;
	overflow: visible;
}

.program-gallery__slide {
	width: var(--program-gallery-slide-width);
	max-width: 85vw;
	height: auto;
}

.program-gallery__figure {
	width: 100%;
	margin: 0;
	aspect-ratio: 621 / 465;
	border-radius: var(--program-gallery-radius);
	overflow: hidden;
}

.program-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 63.9375rem) {
	.program-gallery {
		--program-gallery-slide-width: 28rem;
	}

	.program-gallery__slide {
		max-width: 72vw;
	}
}

@media (max-width: 47.9375rem) {
	.program-gallery {
		--program-gallery-pad: 2.5rem;
		--program-gallery-slide-width: 18.75rem;
	}

	.program-gallery__slide {
		max-width: 82vw;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.program-gallery__intro,
	.program-gallery__swiper {
		opacity: 0;
		transform: translateY(2.5rem);
		will-change: opacity, transform;
		transition:
			opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.program-gallery__swiper {
		transition-delay: 0.12s;
	}

	.program-gallery.is-inview .program-gallery__intro,
	.program-gallery.is-inview .program-gallery__swiper {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}