.ta-gallery-frame {
	container-type: inline-size;
	margin: 3rem 0 2rem;
}

.ta-gallery {
	display: grid;
	grid-auto-flow: dense;
	grid-auto-rows: 140px;
	grid-auto-rows: clamp(118px, 15cqw, 230px);
	grid-template-columns: repeat(12, 1fr);
	gap: 8px;
}

.ta-gallery__item {
	grid-column: span 4;
	grid-row: span 1;
	margin: 0;
	overflow: hidden;
}

.ta-gallery__item--feature {
	grid-column: span 6;
	grid-row: span 2;
}

.ta-gallery__item--portrait {
	grid-column: span 3;
	grid-row: span 2;
}

.ta-gallery__item--stack {
	grid-column: span 3;
	grid-row: span 1;
}

.ta-gallery__item--lower-wide {
	grid-column: span 5;
	grid-row: span 2;
}

.ta-gallery__item--lower-narrow {
	grid-column: span 2;
	grid-row: span 2;
}

.ta-gallery__item--wide {
	grid-column: span 6;
	grid-row: span 2;
}

.ta-gallery__item--tall {
	grid-column: span 3;
	grid-row: span 2;
}

.ta-gallery__link,
.ta-gallery__image {
	display: block;
	height: 100%;
	width: 100%;
}

.ta-gallery__image {
	object-fit: cover;
	transition: filter 0.2s ease-in;
}

.ta-gallery__link:hover .ta-gallery__image,
.ta-gallery__link:focus .ta-gallery__image {
	filter: opacity(70%);
}

@media screen and (max-width: 760px) {
	.ta-gallery {
		grid-auto-rows: auto;
		grid-template-columns: repeat(2, 1fr);
	}

	.ta-gallery__item,
	.ta-gallery__item--feature,
	.ta-gallery__item--portrait,
	.ta-gallery__item--stack,
	.ta-gallery__item--lower-wide,
	.ta-gallery__item--lower-narrow,
	.ta-gallery__item--wide,
	.ta-gallery__item--tall {
		aspect-ratio: 4 / 3;
		grid-column: span 1;
		grid-row: auto;
	}

	.ta-gallery__item--tall {
		aspect-ratio: 3 / 4;
	}
}

@media screen and (max-width: 520px) {
	.ta-gallery {
		grid-template-columns: 1fr;
	}
}