.timeline { position: relative; padding: 12px 0; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, #c9a96e, #c9a96e, #c9a96e, transparent);
  opacity: 0.25;
}
.timeline-item { display: flex; align-items: flex-start; margin-bottom: 60px; position: relative; }
.timeline-item:nth-child(odd) { flex-direction: row; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-card {
  width: calc(50% - 54px); padding: 29px 34px; border-radius: 8px;
  background: #fff; border: 1px solid #e8e8e8; position: relative;
  transition: border-color .25s, box-shadow .25s;
}
.timeline-card:hover { border-color: #d4b87a; box-shadow: 0 2px 19px rgba(201,169,110,.1); }
.t-year { display: inline-block; font-size: 34px; font-weight: 900; color: #c9a96e; margin-bottom: 7px; font-family: Georgia, "Times New Roman", serif; }
.t-num { font-size: 13px; font-weight: 700; color: #c9a96e; opacity: .45; letter-spacing: .12em; margin-bottom: 5px; }
.t-title { font-size: 19px; font-weight: 700; color: #1a1a2e; margin-bottom: 7px; line-height: 1.4; }
.t-desc { font-size: 16px; line-height: 1.65; color: #777; }
.timeline-dot {
  position: absolute; left: 50%; top: 24px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid #c9a96e;
  transform: translateX(-50%); z-index: 2;
}
.timeline-dot::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(201,169,110,.12); transform: translate(-50%,-50%);
}
@media (max-width: 767px) {
  .timeline::before { left: 26px; }
  .timeline-item, .timeline-item:nth-child(even) { flex-direction: row; }
  .timeline-card { width: calc(100% - 72px); margin-left: 53px; }
  .timeline-dot { left: 26px; }
}