/* to add a Tiger Tank Student Entrepreneur Competition logo, add an element with the .competition-logo-container class with children as the <h1> element in index.html */
/* the font size of the first letter of the text logo (the big "T") will be the font-size of the element with class .competition-logo-container, all other sizes will scale accordingly */
.competition-logo-container {
	display: grid;
	grid-template-areas:
		"first-letter title-after-first-letter image-logo"
		"first-letter subtitle image-logo";
	grid-template-rows: 0.6em;
	width: fit-content;

	text-wrap: nowrap;
	font-family: Montserrat, sans-serif;
}
/* default margins for a h1.competition-logo-container are ridiculously large because of the large font-size */
h1.competition-logo-container {
	margin: 0.15em 0;
	/* all sizes (in units of em) of all children of .competition-logo-container will be based off of (but not directly relative to) this font size */
	font-size: var(--base-width);
}
.competition-logo-container > .text-logo-first-letter {
	grid-area: first-letter;

	line-height: 1.07;

	font-family: Gelasio, serif;
	font-size: 1em;
	font-weight: 700;
}
.competition-logo-container > .text-logo-title-after-first-letter {
	grid-area: title-after-first-letter;

	text-transform: uppercase;
	font-weight: 900;
	font-size: 0.5em;
}
.competition-logo-container > .text-logo-subtitle {
	grid-area: subtitle;

	border-top: calc(var(--border-thickness) * 0.67) solid black;
	/* remember that em is only relative to the font size of the parent element when used for font-size, which means that for padding em is relative to the font size of this element */
	padding-top: 0.3em;

	text-transform: capitalize;
	font-weight: 400;
	font-size: 0.165em;
}
.competition-logo-container > .image-logo {
	grid-area: image-logo;
	align-self: center;
	width: 1em;
	padding-left: 0.1em;
}


.organisation-logo-container {
	display: grid;
	grid-template-areas:
		"first-letter title-after-first-letter image-logo"
		"first-letter subtitle image-logo";
	grid-template-rows: 1.2em;
	width: fit-content;

	font-size: var(--base-font-size);
	font-family: Montserrat;
}
.organisation-logo-container > .text-logo-first-letter {
	grid-area: first-letter;

	line-height: 1;
	font-family: Gelasio, serif;
	font-size: 2.8em;
	font-weight: 700;
}
.organisation-logo-container > .text-logo-first-line {
	grid-area: title-after-first-letter;

	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: 900;
}
.organisation-logo-container > .text-logo-second-line {
	grid-area: subtitle;
	
	font-size: 1em;
	letter-spacing: 0.042em;
	text-transform: uppercase;
	font-weight: 700;
}
.organisation-logo-container > .image-logo {
	grid-area: image-logo;
	align-self: center;
	width: 4em;
	margin-left: 0.3em;
}