.main-wrapper--homepage {
	padding-top: var(--padding4);
	padding-bottom: var(--padding4);
}

.main-content {
	hanging-punctuation: first last;
}

.home-timeline-wrapper {
	padding-top: var(--padding4);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: var(--margin3);
	grid-template-areas: 
		"photo photo photo photo"
		"timeline timeline timeline timeline"
	;
	place-items: start;
	@media screen and (min-width: 35em) {
		padding-top: var(--padding6);
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-template-areas: 
			"photo photo photo timeline timeline timeline timeline timeline"
		;
	}
	@media screen and (min-width: 50em) {
		padding-top: var(--padding10);
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas: 
			"photo photo photo photo . timeline timeline timeline timeline timeline timeline ."
		;
	}
	& aside {
		grid-area: photo;
		& picture img {
			width: 100%;
			height: auto;
		}
	}
	& .home-timeline-wrapper__content {
		grid-area: timeline;
	}
}

.big-link {
	display: block;
	padding: var(--padding3HalfBordered) var(--padding4Bordered);
	border: 1px solid var(--borderProminentColor);
	text-align: center;
	box-shadow: var(--shadowStandard);
	color: var(--buttonText);
	background: var(--buttonBackground);
	text-decoration: none;
	cursor: pointer;
	&:hover {
		background: var(--brand);
		border-color: var(--brandAccent);
		color: var(--brandReversedText);
		box-shadow: var(--shadowInteraction);
	}
}

.home-timeline-wrapper__content {
	& h2 {
		margin-top: var(--margin6);
		margin-bottom: var(--margin1);
	}
	& ul {
		color: var(--secondaryText);
		padding-left: 1.25em;
		a {
			color: var(--secondaryText);
		}
	}
}

.homepage-links {
	padding-top: var(--padding8);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, auto);
	gap: var(--margin3);
	grid-template-areas: 
		"writing writing writing writing"
		"gearTools gearTools gearTools gearTools"
		"reading reading reading reading"
	;
	place-items: start;
	@media screen and (min-width: 35em) {
		grid-template-columns: repeat(9, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-template-areas: 
			"writing writing writing gearTools gearTools gearTools reading reading reading"
		;
	}
	@media screen and (min-width: 50em) {
		padding-top: var(--padding17);
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-template-areas: 
			"writing writing writing writing gearTools gearTools gearTools gearTools reading reading reading reading"
		;
	}
	& .homepage-links__section {
		h2 {
			margin-top: 0;
			margin-bottom: var(--margin1);
		}
		& ul {
			color: var(--secondaryText);
			padding-left: 0;
			list-style: none;
			a {
				color: var(--secondaryText);
			}
		}
		&:nth-child(1) {
			grid-area: writing;
		}
		&:nth-child(2) {
			grid-area: gearTools;
		}
		&:nth-child(3) {
			grid-area: reading;
		}
	}
}

.home-portfolio-wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, auto);
	gap: var(--margin3);
	grid-template-areas: 
		"video video video video"
		"subtitles subtitles subtitles subtitles"
		"viewer viewer viewer viewer"
	;
	place-items: start;
	@media screen and (min-width: 35em) {
		grid-template-columns: repeat(8, 1fr);
		grid-template-areas: 
			"video video video subtitles subtitles subtitles subtitles subtitles"
			"viewer viewer viewer viewer viewer viewer viewer viewer"
		;
	}
	@media screen and (min-width: 50em) {
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas: 
			"video video video video subtitles subtitles subtitles subtitles subtitles subtitles subtitles subtitles"
			"video video video video viewer viewer viewer viewer viewer viewer viewer viewer"
			". . viewer viewer viewer viewer viewer viewer viewer viewer viewer viewer"
		;
	}
	& video {
		grid-column-start: 1;
		grid-column-end: 5;
		grid-row-start: 1;
		grid-row-end: 3;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		box-shadow: var(--shadowProminent);
	}
	& .video-subtitles {
		grid-column-start: 5;
		grid-column-end: 13;
		grid-row-start: 1;
		grid-row-end: 2;
		& span {
			background-color: var(--borderDarkColor);
			color: var(--background); 
			display: inline;
			padding: var(--padding1) var(--padding2);
			
			/* Needs prefixing */
			box-decoration-break: clone;
			-webkit-box-decoration-break: clone;
		}
	}
	& .home-portfolio-viewer {
		grid-area: viewer;
		grid-column-start: 3;
		grid-column-end: 13;
		grid-row-start: 2;
		grid-row-end: 4;
		aspect-ratio: 4 / 3;
		border: 1px solid var(--borderDarkColor);
		background: url("/assets/img/viewer-noise.png") 50% 50% repeat, linear-gradient(180deg, rgba(14, 31, 37, 0.00) 0%, rgba(14, 31, 37, 0.20) 100%), #323232;
		
		background-blend-mode: soft-light, normal, normal;
		box-shadow: var(--shadowProminent);
		width: 100%;
		height: 100%;
	}
}

.main-grid--homepage aside {
	grid-area: home-aside;
	& img {
		width: 100%;
		height: auto;
	}
}