/* Full-height normal flow; page scrolls everything */
.crea-timeline-wrap {
  position: relative;
  overflow: visible; /* so rail/dots can sit in the gutter */
}

/* The list just flows; no fixed height */
.crea-timeline {
  position: relative;
}

/* Item layout (Figma) */
.tl-item {
  position: relative; /* for the dot */
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 40px 0;
  border-bottom: 1px solid #dedede;
  /* optional: min-height: 284px; only if you want fixed height per design */
}

.tl-media {
  width: 268px;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f3f3;
  align-self: stretch; /* image fills the item’s height */
}
.tl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tl-body {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* bottom-align text to image */
  gap: 24px;
  padding: 16px 0;
}

.tl-year {
  align-self: flex-start;
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f3b320; /* badge color */
  color: #111;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}

.tl-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: #111;
}
.tl-text {
  margin: 0;
  color: #505050;
}

/* Left vertical rail */
.crea-timeline-wrap::before {
  content: "";
  position: absolute;
  /* adjust this to line up visually with your gutter */
  left: -40px; /* sits in the left gutter */
  top: 0;
  bottom: 0;
  width: 1px;
  background: #dedede;
}

/* Dot: 100px above each item's bottom divider, on the rail */
.tl-item::before {
  content: "";
  position: absolute;
  left: -40px; /* same as rail */
  top: calc(100% - 100px);
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3b320;
  box-shadow: 0 0 0 4px #fff; /* optional white ring */
}

/* default (inactive) dot: gray */
.tl-item::before {
  background: #cfcfcf;
}

/* active item (topmost currently visible): yellow */
.tl-item.is-active::before {
  background: #f3b320;
}

/* Responsive niceties */
@media (max-width: 900px) {
  .tl-item {
    gap: 24px;
  }
  .tl-media {
    width: 200px;
  }
}
@media (max-width: 700px) {
  .tl-item {
    flex-direction: column;
  }
  .tl-media {
    width: 100%;
    height: 200px;
  }
  .crea-timeline-wrap::before,
  .tl-item::before {
    display: none;
  } /* hide rail/dots on small screens */
}