/**
 * Instagram Demo — front-end grid.
 *
 * Column count and gap arrive as inline custom properties on .igdemo, so a
 * single stylesheet serves every combination of 2-8 columns and none-huge
 * spacing without generating per-instance CSS.
 */

.igdemo {
	--igdemo-cols: 6;
	--igdemo-cols-md: 4;
	--igdemo-cols-sm: 3;
	--igdemo-gap: 2px;

	position: relative;
}

.igdemo__grid {
	display: grid;
	grid-template-columns: repeat(var(--igdemo-cols), minmax(0, 1fr));
	gap: var(--igdemo-gap);
	margin: 0;
	padding: 0;
	list-style: none;

	/* Size tiles from their own content, so a short photo is not stretched. */
	align-items: start;
}

.igdemo__item {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.igdemo__link {
	display: block;
	position: relative;
	line-height: 0;
}

.igdemo__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/*
 * Square tiles. This is additive rather than something the uncropped mode
 * switches back off with `aspect-ratio: auto` — that override loses the
 * intrinsic ratio of a responsive `sizes="auto"` image and browsers then
 * resolve the height to an arbitrary value.
 */
.igdemo--cropped .igdemo__image {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------------------------------------------------------------- hover */

.igdemo--hover-fade .igdemo__image {
	transition: opacity 0.2s ease-out;
}

.igdemo--hover-fade .igdemo__item:hover .igdemo__image {
	opacity: 0.7;
}

.igdemo--hover-zoom .igdemo__image {
	transition: transform 0.35s ease-out;
}

.igdemo--hover-zoom .igdemo__item:hover .igdemo__image {
	transform: scale(1.06);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 991px) {
	.igdemo__grid {
		grid-template-columns: repeat(var(--igdemo-cols-md), minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.igdemo__grid {
		grid-template-columns: repeat(var(--igdemo-cols-sm), minmax(0, 1fr));
	}
}