main {
	display: grid;
	grid-template: 
		"heading" 			auto
		"image"				auto
		"quotes"			auto
		"identifiers"		auto
		"biography"			auto
		"positions"			auto
		"transactions"		1fr
		/ 1fr;
	column-gap: 1rem;
	&>section {
		margin-bottom: 0;
	}
}

#investor-header {
	grid-area: heading;
	h1 {
		view-transition-name: investor-heading;
	}
	img {
		float: inline-start;
		margin-inline-end: 1ch;
		height: 1lh;
	}
	img, country-flag {
		line-height: 1.125;
		font-size: 2rem;
	}
}
#investor-image {
	grid-area: image;
	img {
		width: 100%;
		height: auto;
	}
}
#investor-identifiers {
	grid-area: identifiers;
}
#investor-quotes {
	grid-area: quotes;
}
#investor-biography {
	grid-area: biography;
}
#top-positions {
	grid-area: positions;
}
#recent-transactions {
	grid-area: transactions;
}
.identifiers {
	display: grid;
	grid-template-columns: max-content 1fr;
	row-gap: .5rem;
	column-gap: 0;
}
.identifiers dt {
	padding-inline-end: 1rem;
}
.identifiers dt,
.identifiers dd {
	border-bottom: 1px dotted var(--pico-table-border-color, #ccc);
}

#top-positions table,
#recent-transactions table {
	width: 100%;
	border-collapse: collapse;
}
#top-positions th, #top-positions td,
#recent-transactions th, #recent-transactions td {
	padding: 0.5em 1em 0.5em 0;
	border-bottom: 1px dotted var(--pico-table-border-color, #ccc);
	text-align: left;
}

@media screen and (min-width: 1200px) {
	main {
		grid-template: 
			"heading		biography"	auto
			"image			biography"	auto
			"quotes			biography"	auto
			"identifiers	biography"	auto
			"identifiers	biography"	auto
			"positions		biography"	auto
			"transactions	biography"	1fr
			/ 1fr			1fr;
	}
}

@media print {
	table {
		width: 100%;
	}
}