<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)