/* 12 tiles across 2 / 3 / 6 columns — every breakpoint divides evenly, so the
   last row is never left with orphans. */

.instagram {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-xs);
	width: 100%;

	@media (min-width: 768px) {
		grid-template-columns: repeat(3, 1fr);
	}

	@media (min-width: 1024px) {
		grid-template-columns: repeat(6, 1fr);
	}

	> li > a {
		position: relative;
		display: block;
		overflow: hidden;
		aspect-ratio: 1;

		&:after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--c-black);
			opacity: 0;
			transition: opacity var(--a-sm);
		}

		&:hover:after,
		&:focus-visible:after {
			opacity: 0.28;
		}

		> img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform var(--a-md);
		}

		&:hover > img,
		&:focus-visible > img {
			transform: scale(1.05);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.instagram > li > a > img {
		transition-duration: 0.01ms;
	}
}