:root {
	--wrap-full-width2: calc( 100 * var(--vw) - 2 * var(--page-h-padding) );
	--g-item-width2: calc( (var(--wrap-full-width2)  - 3.5 * var(--simple-padding)) / 4 );
}

#images-container {
	margin-left: 0;
	margin-right: 0;
	/*background-color: #ccc;*/
}

.row.secondary-list {
	margin-left: calc(-.5 * var(--simple-padding));
	margin-right: calc(-.5 * var(--simple-padding));
}

.gallery-item {
	height: var(--g-item-width2);
	width: var(--g-item-width2);
	overflow: hidden;
	margin: calc(var(--simple-padding) / 2);
}

.gallery-item.first {
	height: calc( 2 * var(--g-item-width2) );
	width: 100%;
	margin: var(--block-radius) 0 calc(var(--simple-padding) / 2);
}

.gallery-item.two-row {
	/*height: calc( 2 * var(--g-item-width2) + var(--simple-padding) );*/
}

.gallery-item.two-col {
	/*width: calc( 2 * var(--g-item-width2) + var(--simple-padding) );*/
}

.gallery-item .num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 1.2em;
	line-height: 1.2em;
	font-size: 60px;
	font-weight: 800;
	color: #fff;
}

@media (min-width: 1024px) {
	:root {
		--position-point: calc( var(--g-item-width2) + var(--simple-padding) );
		--double-size: calc( 2 * var(--g-item-width2) + var(--simple-padding) );
	}

	.gallery-item:not(.first) { position: absolute; }

	.gallery-item[data-index="1"] { top: 0; left: 0; height: var(--g-item-width2); }

	.gallery-item[data-index="2"] { top: 0; left: calc( var(--position-point) * 1 ); height: var(--double-size); }

	.gallery-item[data-index="3"] { top: 0; left: calc( var(--position-point) * 2 ); width: var(--double-size);}

	.gallery-item[data-index="4"] {
		left: calc( var(--position-point) * 2 );
		top: calc( var(--position-point) * 1 );
	}

	.gallery-item[data-index="5"] { left: 0; top: calc( var(--position-point) * 1 ); height: var(--double-size); }

	.gallery-item[data-index="6"] {
		left: calc( var(--position-point) * 3 );
		top: calc( var(--position-point) * 1 );
	}

	.gallery-item[data-index="7"] {
		top: calc( var(--position-point) * 2 );
		left: calc( var(--position-point) * 1 );
		width: var(--double-size);
	}

	.gallery-item[data-index="8"] {
		top: calc( var(--position-point) * 2 );
		left: calc( var(--position-point) * 3 );
		height: var(--double-size);
	}

	.gallery-item[data-index="9"] {
		top: calc( var(--position-point) * 3 );
		left: calc( var(--position-point) * 2 );
	}

	.gallery-item[data-index="10"] {
		top: calc( var(--position-point) * 3 );
		left: 0;
		width: var(--double-size);
	}

	.gallery-item[data-index="11"] {
		top: calc( var(--position-point) * 4 );
		left: calc( var(--position-point) * 2 );
		width: var(--double-size);
	}

	.gallery-item[data-index="12"] {
		top: calc( var(--position-point) * 4 );
		left: calc( var(--position-point) * 1 );
		height: var(--double-size);
	}

	.gallery-item[data-index="13"] {
		top: calc( var(--position-point) * 4);
		left: 0;
	}

	.gallery-item[data-index="14"] {
		top: calc( var(--position-point) * 5);
		left: calc( var(--position-point) * 2 );
	}

	.gallery-item[data-index="15"] {
		top: calc( var(--position-point) * 5 );
		left: 0;
	}

	.gallery-item[data-index="16"] {
		top: calc( var(--position-point) * 5 );
		left: calc( var(--position-point) * 3 );
	}

}

@media (max-width: 1023px) and (min-width: 760px)  {
	:root {
		--g-item-width2: calc( (var(--wrap-full-width2)  - 2.5 * var(--simple-padding)) / 3 );
		--double-size: calc( 2 * var(--g-item-width2) + var(--simple-padding) );
		--position-point: calc( var(--g-item-width2) + var(--simple-padding) );
	}

	h1.article-title { width: 32ch; }

	.gallery-item:not(.first) { position: absolute; }

	.gallery-item[data-index="1"] { top: 0; left: 0; }

	.gallery-item[data-index="2"] { top: 0; left: calc( var(--position-point) * 1 ); width: var(--double-size);}

	.gallery-item[data-index="3"] { left: 0; top: calc( var(--position-point) * 1 ); }

	.gallery-item[data-index="4"] {
		left: calc( var(--position-point) * 1 );
		top: calc( var(--position-point) * 1 );
		height: var(--double-size);
	}

	.gallery-item[data-index="5"] { left: calc( var(--position-point) * 2 ); top: calc( var(--position-point) * 1 ); }

	.gallery-item[data-index="6"] {
		left: 0;
		top: calc( var(--position-point) * 2 );
		height: var(--double-size);
	}

	.gallery-item[data-index="7"] {
		top: calc( var(--position-point) * 3 );
		left: calc( var(--position-point) * 1 );
	}

	.gallery-item[data-index="8"] {
		top: calc( var(--position-point) * 2 );
		left: calc( var(--position-point) * 2 );
		height: var(--double-size);
	}

	.gallery-item[data-index="9"] {
		top: calc( var(--position-point) * 4 );
		left: 0;
		width: var(--double-size);
	}

	.gallery-item[data-index="10"] {
		top: calc( var(--position-point) * 4 );
		left: calc( var(--position-point) * 2 );
	}

	.gallery-item[data-index="11"] {
		top: calc( var(--position-point) * 5 );
		left: 0;
	}

	.gallery-item[data-index="12"] {
		top: calc( var(--position-point) * 5 );
		left: calc( var(--position-point) * 1 );
		width: var(--double-size);
	}

	.gallery-item[data-index="13"] {
		top: calc( var(--position-point) * 6);
		left: 0;
	}

	.gallery-item[data-index="14"] {
		top: calc( var(--position-point) * 6);
		left: calc( var(--position-point) * 1 );
		height: var(--double-size);
	}

	.gallery-item[data-index="15"] {
		top: calc( var(--position-point) * 6 );
		left: calc( var(--position-point) * 2 );
	}

	.gallery-item[data-index="16"] {
		top: calc( var(--position-point) * 7 );
		left: calc( var(--position-point) * 2 );
	}
}

@media (max-width: 759px) {
	:root {
		--g-item-width2: calc( (var(--wrap-full-width2)  - 1.5 * var(--simple-padding)) / 2 );
		--double-size: calc( 2 * var(--g-item-width2) + var(--simple-padding) );
		/*
		--position-point: calc( var(--g-item-width2) + var(--simple-padding) );*/
	}


	.secondary-list {
		/*column-count: 2;*/
	}

	.secondary-list .gallery-item:nth-of-type(odd) {
		height: var(--double-size);
	}
}