/* Labs homepage hero (Elementor).
 * The section uses CSS GRID with two columns on phones, so the headline
 * collapses to one word per line and the mascot overlaps the copy.
 * Elementor IDs are stable until the section is rebuilt.
 */

@media (max-width: 1024px) {
	.elementor-element-a5a12bc,
	.e-con.e-parent:has(h1 .line.white) {
		--grid-template-columns: 1fr;
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
		align-items: stretch !important;
		justify-items: stretch !important;
		gap: 12px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-bottom: 96px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-element-a5a12bc > .e-con,
	.e-con.e-parent:has(h1 .line.white) > .e-con {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
		--width: 100%;
		--container-widget-width: 100%;
	}

	.elementor-element-a5a12bc h1,
	.elementor-element-a5a12bc .elementor-heading-title,
	.e-con.e-parent:has(h1 .line.white) h1,
	.e-con.e-parent:has(h1 .line.white) .elementor-heading-title {
		font-size: clamp(28px, 8vw, 42px) !important;
		line-height: 1.15 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-element-a5a12bc .line {
		display: block;
	}

	.elementor-element-a5a12bc img,
	.e-con.e-parent:has(h1 .line.white) img {
		max-width: min(200px, 60vw) !important;
		width: auto !important;
		height: auto !important;
		margin: 8px auto 0 !important;
		display: block !important;
	}

	.elementor-element-a5a12bc .elementor-widget,
	.elementor-element-a5a12bc .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
	}
}