/**
 * Still Water Gallery (sw-gallery): Figma "Photo gallery" (Gallery 1–4) at 1440, 834 and 390.
 *
 * Padding 80 / 56 / 32. "← All cabins" (14/20, 44 tall), then 24 apart: the title (56/64,
 * 36/44 on phones), the photo (1200 × 1000 / 770 × 640 / 350 × 440, square corners), the line
 * under it (14/20 muted) and the bar: Previous / Next (180 wide, 16 apart) on the left, the
 * button (240) on the right. On phones Previous / Next share the row and the button runs the
 * full width under them, 24 apart.
 */

.sw-gallery__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.sw-gallery__inner > * {
	max-width: 100%;
}

.sw-gallery__back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sw-heading);
	text-decoration: none;
}

.sw-gallery__title {
	margin: 0;
	color: var(--sw-heading);
	font-family: var(--sw-serif);
	font-size: var(--sw-fs-h1);
	line-height: var(--sw-lh-h1);
	font-weight: 400;
}

.sw-gallery__stage {
	align-self: stretch;
	height: 1000px;
	overflow: hidden;
	background: var(--sw-c-line);
}

.sw .sw-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sw-gallery__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	align-self: stretch;
}

.sw-gallery__controls {
	display: flex;
	gap: 16px;
}

.sw-gallery__step {
	width: 180px;
}

.sw-gallery__cta {
	width: 240px;
}

@media (max-width: 1024px) {
	.sw-gallery__stage {
		height: 640px;
	}
}

@media (max-width: 767px) {
	.sw-gallery__stage {
		height: 440px;
	}

	.sw-gallery__bar {
		flex-direction: column;
		align-items: stretch;
	}

	.sw-gallery__step {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.sw-gallery__cta {
		width: 100%;
	}
}