/*Navigation bar changes*/
/************************/
nav ul li.active {
	background: var(--color-accent);
}





/* About page hero banner */
/**************************/
section:nth-of-type(1) {
	background: var(--color-accent);
}

section:nth-of-type(1) > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-120);
	padding-block: var(--space-32);
}

section:nth-of-type(1) h1 {
	font-size: 4em;
	font-weight: var(--font-weight-semibold);
}

section:nth-of-type(1) img {
	width: 400px;
	height: 400px;
	border-radius: var(--radius-8);
	object-fit: cover;
	box-shadow: 8px 8px 8px rgba(0, 0, 0, .25);
    object-position: 0% 0%;
}





/* About page reading column */
/*****************************/
section:nth-of-type(2) {
	background: var(--color-primary);
}

section:nth-of-type(2) > .container {
	display: block;
	padding-block: var(--space-40);
}

section:nth-of-type(2) div h2 {
    margin-bottom: var(--space-32);
}

section:nth-of-type(2) div article {
    margin-bottom: var(--space-16);
	display: grid;
	gap: var(--space-16);
	font-size: var(--font-size-text);
}




/*Different Styling depending on the size of the screen*/
@media (max-width: 64em) {
	section:nth-of-type(1) > .container {
		gap: var(--space-32);
	}

	section:nth-of-type(1) h1 {
		font-size: 3em;
	}
}

@media (max-width: 48em) {
    /*changes to the banner when the page becomes narrow*/
	section:nth-of-type(1) > .container {
		width: min(var(--container), calc(100% - 32px));
		flex-direction: column;
		gap: var(--space-32);
		padding-block: var(--space-32);
	}

	section:nth-of-type(1) h1 {
		font-size: 2.5em;
	}

	section:nth-of-type(1) img {
		width: 100%;
		max-width: var(--image-portrait-width);
		height: auto;
		aspect-ratio: 1;
	}

	.about-story > .container {
		width: min(var(--container), calc(100% - 32px));
		padding-block: var(--space-40) var(--space-64);
	}
}