<section class="experience">
<h1 class="experience__heading">Experience Timeline</h1>
<ul class="timeline">
	<li class="timeline__item">
		<time class="timeline__time">2016/01/07</time>
		<h3 class="timeline__heading">Heading</h3>
		<p class="timeline__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper egestas mi, in feugiat eros sagittis at. Nullam non vestibulum dui</p>
	</li>
	<li class="timeline__item">
		<time class="timeline__time">2016/01/07</time>
		<h3 class="timeline__heading">Heading</h3>
		<p class="timeline__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper egestas mi, in feugiat eros sagittis at. Nullam non vestibulum dui</p>
	</li>
	<li class="timeline__item">
		<time class="timeline__time">2016/01/07</time>
		<h3 class="timeline__heading">Heading</h3>
		<p class="timeline__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper egestas mi, in feugiat eros sagittis at. Nullam non vestibulum dui</p>
	</li>
	<li class="timeline__item">
		<time class="timeline__time">2016/01/07</time>
		<h3 class="timeline__heading">Heading</h3>
		<p class="timeline__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper egestas mi, in feugiat eros sagittis at. Nullam non vestibulum dui</p>
	</li>
	<li class="timeline__item">
		<time class="timeline__time">2016/01/07</time>
		<h3 class="timeline__heading">Heading</h3>
		<p class="timeline__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper egestas mi, in feugiat eros sagittis at. Nullam non vestibulum dui</p>
	</li>
</ul>
</section>

//Normalize Added

//Variable
$media-lg: 992px
$media-md: 768px
$media-sm: 576px

\:root
	--timelineWidth: calc(var(--timelineItemMaxWidth) * 2 + var(--timelineItemPadding) * 4 + var(--timelineNodeDistance) * 2)
	--timelineProgressWidth: 3px
	--timelineNodeSize: 25px
	--timelineNodeDistance: 2.5rem
	--timelineItemMaxWidth: 300px
	--timelineItemPadding: 1rem
	--timelineItemDistance: 3rem

*, *::before, *::after
	box-sizing: initial

html
	box-sizing: border-box

body
	background: skyblue

ul, ol
	list-style-type: none
	padding: 0
	margin: 0

h1,h2,h3,h4,h5,h6,p
	margin: 0

a
	text-decoration: none

.experience
	display: flex
	justify-content: center
	flex-direction: column
	align-items: center

.experience__heading
	padding: 8rem 0

.timeline
	position: relative
	padding: 4rem 0

	&::before
		content: ''
		position: absolute
		width: var(--timelineProgressWidth)
		height: 100%
		background: gray
		top: 0
		left: 0
		margin-left: calc(var(--timelineNodeDistance) * -1)
		transform: translate(-50%)
		z-index: -1

.timeline__item
	position: relative
	background: white
	padding: var(--timelineItemPadding)
	margin-bottom: var(--timelineItemDistance)
	max-width: var(--timelineItemMaxWidth)
	border-radius: 10px

	&::before
		content: ""
		position: absolute
		top: 0
		left: 0
		width: var(--timelineNodeSize)
		height: var(--timelineNodeSize)
		margin-left: calc(var(--timelineNodeDistance) * -1)
		transform: translate(-50%, -50%)
		background: orange
		border-radius: 50%

.timeline__time
	color: gray
	
.timeline__heading
	font-size: 2rem
	line-height: 1.7
	
.timeline__paragraph
	
@media (min-width: $media-md)
	.timeline
		width: var(--timelineWidth)
		display: flex
		align-items: center
		justify-content: center
		flex-direction: column
		
		&::before
			transform: none
			left: auto
			margin: 0
	
	.timeline__item
		left: 50%
		transform: translate(-50%)
	
		&:nth-child(even)
			left: -50%
			transform: translate(50%)
	
			&::before
				left: auto
				right: 0
				transform: none
				transform: translate(50%, -50%)
				margin-right: calc(var(--timelineNodeDistance) * -1)