main {
    display: grid;
    grid-template: 
      "heading"			auto
			"metadata"		auto
			"chart"				auto
      "investor-tx"	1fr 
		/ 1fr;
}
#company-header {
    grid-area: heading;
    h1 {
        view-transition-name: company-heading;
    }
	img {
		float: inline-start;
		margin-inline-end: 1ch;
		height: 1lh;
	}
	img, country-flag {
		line-height: 1.125;
		font-size: 2rem;
	}
}
#investor-metadata {
	grid-area: metadata;
	max-width: 60ch;
	dl {
		display: grid;
		grid-template-columns: 1fr minmax(14.5rem, 1fr);
		row-gap: .5rem;
		column-gap: 0;
		dt {
			padding-inline-end: 1rem;
		}
		dt, dd {
			border-bottom: 1px dotted var(--pico-table-border-color);
		}
		dd {
			margin-inline-start: 0;
			b, span {
				min-width: 3.5em;
				display: inline-block;
			}
			text-align: end;
			meter {
				margin-inline-start: .5em;
				height: 1lh;
				width: 9em;
				vertical-align: bottom;
			}
			.valued {
				&::before {
					content: "(";
					color: var(--pico-color);
				}
				&::after {
					content: ")";
					color: var(--pico-color);
				}
			}
		}
	}
}
#chart {
	grid-area: chart;
	company-investor-chart {
		display: block;
		height: calc(360px + 1em);
	}
}
#investor-tx {
	grid-area: investor-tx;
	table {
		width: 100%;
		margin-top: 0.5rem;

		/* Hide columns 2 + 3 on small screens */
		th:nth-child(2),
		td:nth-child(2),
		th:nth-child(3),
		td:nth-child(3) {
			display: none;
		}
	}
}

@media screen and (min-width: 1200px) {
	#investor-tx table {
		/* Show columns 2 + 3 on larger screens */
		th:nth-child(2),
		td:nth-child(2),
		th:nth-child(3),
		td:nth-child(3) {
			display: table-cell;
		}
	}
}