/* Jai Zharotia Instagram. */
.jz-ig-head { margin-bottom: 32px; }
.jz-ig-grid { list-style: none; margin: 0; padding: 0; }
.jz-ig-grid li { margin: 0; min-width: 0; }
.jz-ig-grid a { position: relative; display: block; overflow: hidden; background: var(--paper-2, #e9e1d3); text-decoration: none; }
.jz-ig-grid img { width: 100%; height: 100%; display: block; transition: transform .6s ease, filter .4s; }
.jz-ig-grid a:hover img, .jz-ig-grid a:focus-visible img { transform: scale(1.03); filter: brightness(.55); }
.jz-ig-type { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.jz-ig-cap { position: absolute; inset: auto 0 0 0; padding: 14px; font-size: 15px; line-height: 1.4; color: #f3ede1; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.jz-ig-grid a:hover .jz-ig-cap, .jz-ig-grid a:focus-visible .jz-ig-cap { opacity: 1; transform: none; }

/* Same shape for every post (Instagram 4:5 by default), 5 across. */
.jz-ig-uniform { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.jz-ig-uniform a { aspect-ratio: var(--tile, 4 / 5); }
.jz-ig-uniform img { object-fit: cover; object-position: 50% 50%; }

/* Each post in its own shape: justified rows. */
.jz-ig-own { display: flex; flex-wrap: wrap; gap: 10px; }
.jz-ig-own::after { content: ""; flex-grow: 999; }
.jz-ig-own li { flex-grow: var(--r, 1); flex-basis: calc(var(--r, 1) * 210px); }
.jz-ig-own a { aspect-ratio: var(--r, 1); }
.jz-ig-own img { object-fit: contain; }

@media (max-width: 900px) { .jz-ig-uniform { grid-template-columns: repeat(4, 1fr); gap: 6px; } .jz-ig-own { gap: 6px; } }
@media (max-width: 600px) {
	/* Phones: one row that slides sideways. */
	.jz-ig-grid { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 16px); gap: 8px; margin: 0 calc(var(--gutter, 16px) * -1); padding: 0 var(--gutter, 16px) 6px; -webkit-overflow-scrolling: touch; }
	.jz-ig-grid::after { display: none; }
	.jz-ig-uniform li { flex: 0 0 64%; scroll-snap-align: start; }
	.jz-ig-own li { flex: 0 0 auto; width: min(calc(260px * var(--r, 1)), 82vw); scroll-snap-align: start; }
	.jz-ig-cap { display: none; }
}
@media (prefers-reduced-motion: reduce) { .jz-ig-grid img, .jz-ig-cap { transition: none; } }