/**
 * Gallery
 *
 * A slide track breaking past the container, the arrows on the head row beside the heading and
 * a counter under the frame.
 */

.module.gallery .head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--text-spacing-medium);
}

.module.gallery .head > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

/* Out to the same edge every other carousel's pager reaches, rather than stopping at the head's
   own right edge — `--container-breakout-full` is the house reach for it. */
.module.gallery .arrows {
	display: flex;
	gap: 12px;
	margin-right: var(--container-breakout-full);
}

.module.gallery .slides {
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.gallery .jazzy-carousel-wrapper,
.module.gallery .slides.jazzy-static {
	margin-inline: var(--viewport-edge);
}

.module.gallery .jazzy-carousel-wrapper > .slides,
.module.gallery .jazzy-carousel-wrapper > .jazzy-counter {
	margin-left: calc(var(--viewport-edge) * -1);
}

/* The ratio sits on the picture rather than on the slide. A flex item that takes its height from
   a ratio alone collapses in Safari, which shows as a track of photographs that measure correctly
   in a desktop browser and are simply absent on an iPad. */
.module.gallery .slides > li {
	aspect-ratio: auto;
	border-radius: 10px;
}

.module.gallery .slides > .media img,
.module.gallery .slides > li > picture {
	aspect-ratio: 990 / 557;
	display: block;
	position: relative;
	width: 100%;
}

.module.gallery .jazzy-counter {
	font-size: calc(12rem / 16);
	font-weight: 700;
	line-height: calc(18 / 12);
	margin-top: var(--text-spacing-small);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	.module.gallery .head {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--text-spacing-xsmall);
	}

}