.metric-plot-grid {
	--plots-per-row: 0;
	--plot-gap: 1rem;

	display: grid;
	gap: var(--plot-gap);
	width: 100%;
	align-items: start;
}

.metric-plot-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.metric-plot-grid[style*="--plots-per-row"] {
	grid-template-columns: repeat(var(--plots-per-row), minmax(0, 1fr));
}

@media (max-width: 900px) {
	.metric-plot-grid[style*="--plots-per-row"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.metric-plot-grid[style*="--plots-per-row"] {
		grid-template-columns: 1fr;
	}
}

.metric-plot {
	--plot-line: var(--dark_blue);
	--plot-grid: var(--border);
	--plot-font: var(--default);
	--plot-hover-bg: var(--contents);
	--plot-bg: transparent;

	color: var(--plot-font);

	width: 100%;
	aspect-ratio: 16 / 9;
	background: transparent;
	min-width: 0;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0;
}

.metric-plot.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.04);
	backdrop-filter: blur(1px);
	z-index: 2;
}

.metric-plot.is-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("/static/img/Ajax_loader_metal_512.gif") center center / 48px 48px no-repeat;
	z-index: 3;
}

.metric-plot .js-plotly-plot {
	position: relative;
	z-index: 1;
}