-
	var timeline = [
	{
		title: "Title A",
		detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi."
	}, {
		title: "Title B",
		detail: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi."
	}, {
		title: "Title C",
		detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi."
	}, {
		title: "Title D",
		detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi."
	}, {
		title: "Title D",
		detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi."
	}
	];
	
mixin timeline(entry)
	dl.timeline--entry
		dt.timeline--entry__title= entry.title
		dd.timeline--entry__detail= entry.detail

.wrapper
	h1 Timeline Created With CSS Grid

	.timeline
		for entry in timeline
			+timeline(entry)

//-Timeline Specific Mixins

//- Indicator style
@mixin timeline-indicator {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	position: absolute;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

// - Timeline entry
// - Produces the following:
/* - &:nth-child(1) {
			 grid-area: entry1;
		 }
   - useful timesaver if there is a lengthy list
*/ 
@mixin timeline-entry {
	@for $i from 1 through 5 {
		&:nth-child(#{$i}) {
			grid-area: entry#{$i};
		}
	}
}

//- Variables
$timeline-indicator-color: $seagull;
$timeline-indicator-border:  1px solid $gondola;
$timeline-title-background-color: $dark-pink;


//- Mobile First Timeline - stacked for small viewports and browsers that don't support grid
.timeline {
	line-height: 1.5em;
	font-size: 14px;
	transition: all .4s ease;
	position: relative;
	counter-reset: section;
	
	//- indicator line
	&:before {
		content:"";
		width: 10px;
		height: 100%;
		background: $timeline-indicator-color;
		position: absolute;
		top: 0;
		left: -3.313em;
		border-radius: 40px 40px;
	}
}

.timeline--entry {
	position: relative;
	background-color: $panel-background-color;

	&__title {
		color: white;
		background-color: $timeline-title-background-color;
		font-family: $subheading-font-family;
		font-weight: $font-weight-light;
		font-size: 1rem;
		padding: 1em;
		&:before {
			@include timeline-indicator;
			left: -1em;
			border-right: 10px solid $dark-pink; 
		}
	}
	
	&__detail {
		background-color: $alto;
		padding: 1em;
		margin: 0;
	}
			
	//- number indicator
	&:before {
		content: "";
		font-family: $secondary-font-family;
		color: $white;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3em;
		height: 3em;
		background-color: $seagull;
		border: .2em solid white;
		border-radius: 50%;
		position: absolute;
		counter-increment: section;
  	content: counter(section);
		text-shadow: 0 1px 0 $charcoal;
		left: -4.5em;
	}
}


//- Tablet Up Screens Layout if CSS Grid is supported
@supports (display: grid) {
	@include tablet-up {
		.timeline {
			display: grid;
			grid-gap: 4.75em;
			grid-template-areas: 	".  entry1"
														"entry2  ."
														". entry3"
														"entry4 ."
														". entry5";
			//- Timeline line
			&:before {
				left: 49.5%;
			}
		}
		
		.timeline--entry {
				@include timeline-entry;
			
				//- odd timeline entry
				&:nth-of-type(odd){
					//- Default position the number indicator mobile
					&:before {
						left: -3.8em;
					}
				}
				
			 //- even timeline entry	
				&:nth-of-type(even){
					&:not(:nth-of-type(odd)) {
						//-right pointing arrow indicator
						.timeline--entry__title {
							&:before {
								left: 100% ;
								border-left: 10px solid $dark-pink;
								border-right: 0;
							}
						}
					}
					//- Position the number indicator
					&:before {
						left: 103%;
					}
				}	
			}
		}
	}