/**
 * CONTAINER — mega-menu columns follow the panel width, not the viewport.
 */
.helix-mega,
.helix-mega-panel,
[data-helix-mega] {
	container-type: inline-size;
	container-name: helix-mega;
}

@container helix-mega (max-width: 720px) {
	.helix-mega-cols,
	.helix-mega .cols {
		grid-template-columns: 1fr;
	}
}

@container helix-mega (min-width: 721px) and (max-width: 1100px) {
	.helix-mega-cols,
	.helix-mega .cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container helix-mega (min-width: 1101px) {
	.helix-mega-cols,
	.helix-mega .cols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}