/*
 * The Grid plugin scales its tile size proportionally to viewport width but
 * has no dedicated mobile layout: below ~768px the tiles shrink to ~172x86px,
 * far too small to hold a poster image + title + director name. The result:
 * text overlapping the row above/below, and on some cards the poster image
 * (a background-image div, not an <img>) collapsing to near-zero height and
 * effectively disappearing (seen on the Library Titles page).
 *
 * Fix: below 768px, bypass The Grid's JS-computed absolute positioning and
 * force a simple single-column stacked layout instead (image, then title,
 * then director name, in normal flow) so nothing can overlap regardless of
 * how many items or how long the titles are.
 */
@media (max-width: 767px) {
	.tg-grid-wrapper,
	.tg-grid-holder {
		height: auto !important;
	}
	.tg-grid-holder {
		display: block !important;
	}
	.tg-item {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
		display: block !important;
		margin-bottom: 24px !important;
	}
	.tg-item-inner {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	.tg-item-media-holder,
	.tg-item-media-inner {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	.tg-item-image {
		position: static !important;
		width: 100% !important;
		height: 220px !important;
		left: auto !important;
		top: auto !important;
		display: block !important;
	}
	.tg-item-media-content {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		top: auto !important;
		left: auto !important;
		display: block !important;
	}
	.tg-top-holder {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		top: auto !important;
		left: auto !important;
		padding: 12px 4px 0 !important;
		display: block !important;
	}
	.tg-item-title,
	.tg-item-meta-data {
		position: static !important;
		width: 100% !important;
		display: block !important;
	}
	.tg-item-overlay {
		display: none !important;
	}
	.tg-element-absolute.tg-element-above {
		position: absolute !important;
		inset: 0 !important;
	}
}