/**/
/* Timeline */
.timeline {
  display: grid;
  fex-direction: column;
  grid-template-columns: 1fr 1fr;
  gid-auto-rows: 1fr;
  grid-auto-flow: row;
  gap: 1px;
}
.timeitem {
	padding-top: 25px;
	align-content: end;
	aign-items: end;
	box-sizing: content-box;
	fex-wrap: wrap;
}
.imeitem img:a {
	display: inline;
	background-color: yellow;
  text-align: right;
  foat: right;
}
.timeitem:nth-child(even) img {
	bckground-color: cyan;
}
.timeitem img {
	border-radius: 5px !important;
	width: 30%;
	margin-bottom: 3px;
	background-color: transparent;
}
/* new */
.timeitem:not(:first-child):not(:last-child) {
	pdding-top: 10px;
	brder-bottom: 2px solid lightgray;
	grid-row: span 2;
}
/*  */
.timeitem:not(:nth-last-of-type(2)) {
	pdding-top: 10px;
	border-bottom: 2px solid lightgray;
}
.timeitem:nth-child(odd) {
	dsplay: inline;
	border-right: 2px dotted lightgray;
	aign-self: flex-start;
	padding-right: 20px;
	text-align: right;
	mrgin-left: auto;
	foat: right;
  aign-items: flex-end;
	jstify-content: flex-end;
	bckground-color: blue;
}
.timeitem:nth-child(even) {
	border-left: 2px dotted lightgray;
	padding-left: 20px;
	text-align: left;
	aign-items: start;
}
/* :not(:first-child) */
.timeitem:nth-child(odd):not(:nth-last-of-type(2))::after {
  content: '';
	display: block;
	background-color: lightgray;
	width: 10px;
	height: 10px;
	border-radius: 30%;
	position: relative;
	top: 6px;
	left: calc(100% + 17px);
	rght: calc(-100% - 5px);
	pdding-right: auto;
}
.timeitem:nth-child(even):not(:first-child):not(:nth-last-of-type(2))::after {
  content: '';
	display: block;
	background-color: lightgray;
	width: 10px;
	height: 10px;
	border-radius: 30%;
	position: relative;
	top: 6px;
	left: calc(0% - 27px);
	rght: calc(-100% - 5px);
	pdding-right: auto;
}

/**/
/* Serpentine */
.serpentine {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.serpentine > div {
  width: 100%;
  box-sizing: border-box;
  padding-top: 20px;
  order: 1;
  border-bottom: 4px dotted lightgray;
  brder-bottom: 4px solid lightgray;
  /* Text at bottom of div */
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-direction: column;
  line-height: 1.5em;
}
.serpentine > div:nth-child(odd)  {
  order: 1;
  border-right: 4px dotted lightgray;
  /* Right align */
  padding-right: 15px;
  align-items: flex-end;
  aign-items: end;
  align-content: flex-end;
  aign-content: end;
  align-self: flex-end;
  text-align: right;
  margin-left: auto;
}
.serpentine > div img {
  border-radius: 0px !important;
  mx-width: 20%;
  margin-bottom: 3px;
  background-color: transparent;
}

.erpentine > div:nth-child(odd) img {
  /* Right align */
  margin-left: auto;
  margin-bottom: 3px;
}
.serpentine > div:nth-child(even) {
  border-left: 4px dotted lightgray;
  /* Left align */
  padding-left: 15px;
  align-items: start;
  align-content: start;
  text-align: left;
}
.erpentine > div:nth-child(even) img {
  /* Left align */
  margin-right: auto;
  margin-bottom: 3px;
}
.serpentine > div:last-child {
  height: 35px;
  border-bottom: none !important;
}
/*:not(:first-child)*/
.serpentine > div:nth-child(odd):not(:last-child)::after {
  content: '';
  display: block;
  background-color: gray;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  position: relative;
  top: 6px;
  left: 21px;
  rght: calc(0% - 21px);
  padding-right: auto;
}
.serpentine > div:nth-child(even):not(:last-child)::after {
  content: '';
  display: block;
  background-color: gray;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  position: relative;
  bottom: 300px;
  top: 6px;
  right: 22px;
}
.serpentine img {
  border-bottom: none !important;
  txt-decoration: none !important;
}