/* ABOUTME: Styles for the image storm animation layout (scattered floating images). */
/* ABOUTME: Positions images with CSS transforms and handles scroll-triggered transitions. */
.section--image_storm,
.section--header_image_storm {
	padding: 0px;
	overflow-x: hidden;
}

/* Standalone image storm: absolute positioning */
.section--image_storm .image-storm {
	position: relative;
	height: 65vh;
	min-height: 640px;
	max-width: 1600px;
	margin: 0 auto;
}

.image-storm__item_1 {
	min-width: 200px;
	width: 20%;
	--storm-x: 0%;
	--storm-y: 90%;
	aspect-ratio: 1;
}

.image-storm__item_2 {
	min-width: 150px;

	width: 20%;
	--storm-x: 22%;
	--storm-y: 85%;
	aspect-ratio: 9/12;
}
.image-storm__item_3 {
	min-width: 250px;

	width: 35%;
	--storm-x: 80%;
	--storm-y: 20%;
	aspect-ratio: 16/10;
}
.image-storm__item_4 {
	min-width: 150px;

	width: 18%;
	--storm-x: 100%;
	--storm-y: 30%;
	aspect-ratio: 9/11;
}

.image-storm__item_5 {
	min-width: 250px;
	width: 35%;
	--storm-x: 40%;
	--storm-y: 110%;
	aspect-ratio: 16/9;
}

.section--image_storm img {
	position: absolute;

	left: var(--storm-x);
	object-fit: cover;
	top: var(--storm-y);
	border: 2px solid white;
}

/* Header image storm: grid layout */
.section--header_image_storm {
	display: grid;
	grid-template-columns: repeat(27, 1fr);
	grid-template-rows: repeat(14, 1fr);
	gap: 0;
}

@media screen and (min-width: 768px) {
	section.regular_section.section--header_image_storm
		.hero-layout.content_wrapper {
		position: absolute;
		top: 0;
		left: 50%;
		width: calc(100% - (var(--outer-margin) * 2));
		max-width: var(--mcw);
		transform: translateX(-50%);
		padding-top: 2vw;
	}
}

.section--header_image_storm .image-storm__item {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 2px solid white;
}

.section--header_image_storm .image-storm__item_1 {
	grid-area: 6 / 1 / 13 / 7;
}

.section--header_image_storm .image-storm__item_2 {
	grid-area: 10 / 8 / 15 / 17;
}

.section--header_image_storm .image-storm__item_3 {
	grid-area: 3 / 12 / 9 / 23;
}

.section--header_image_storm .image-storm__item_4 {
	grid-area: 6 / 21 / 12 / 27;
}

@media screen and (max-width: 767px) {
	.section--header_image_storm {
		display: flex;
		flex-direction: column;
	}

	.section--header_image_storm .image-storm__item {
		display: none;
	}

	.section--header_image_storm .image-storm__item_1 {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 10;
		border: none;
		border-radius: var(--rbr);
	}
}