.jala-timeline {
  --jala-timeline-columns-large: 4;
  --jala-timeline-columns-medium: 3;
  --jala-timeline-columns-small: 1;
  --jala-timeline-gap: var(--spacing-lg);
  --jala-timeline-line-color: linear-gradient(270.35deg, var(--color-red-900) 0.17%, var(--color-red-600) 100%);
  --jala-timeline-line-bleed: 4px;
  --jala-timeline-bottom-gap: var(--spacing-lg);
  --jala-timeline-scrollbar-height: 28px;
  --jala-timeline-icon-bg: var(--color-red-900, var(--color-red-900));
  --jala-timeline-icon-color: #FFF1F2;
  --jala-timeline-scrollbar-thumb: var(--color-grey-300);
  --jala-timeline-scrollbar-track: var(--color-grey-100);
  --jala-timeline-title-color: var(--color-grey-950);
  --jala-timeline-content-color: var(--color-grey-700);
  --jala-timeline-title-font-family: var(--h2_typography-font-family);
  --jala-timeline-title-font-size: var(--awb-typography2-font-size);
  --jala-timeline-title-line-height: var(--awb-typography2-line-height);
  --jala-timeline-title-font-weight: var(--awb-typography2-font-weight, 700);
  --jala-timeline-title-font-style: var(--h2_typography-font-style, normal);
  --jala-timeline-title-letter-spacing: var(--awb-typography2-letter-spacing, normal);
  --jala-timeline-title-text-transform: var(--h2_typography-text-transform, none);
  --jala-timeline-content-font-family: var(--body_typography-font-family);
  --jala-timeline-content-font-size: var(--body_typography-font-size);
  --jala-timeline-content-line-height: var(--body_typography-line-height);
  --jala-timeline-content-font-weight: var(--body_typography-font-weight, 400);
  --jala-timeline-content-font-style: var(--body_typography-font-style, normal);
  --jala-timeline-content-letter-spacing: var(--body_typography-letter-spacing, normal);
  --jala-timeline-content-text-transform: none;
}

.jala-timeline__scroller {
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: calc(var(--jala-timeline-line-bleed) * -1);
  margin-left: calc(var(--jala-timeline-line-bleed) * -1);
  padding: 0 var(--jala-timeline-line-bleed) var(--jala-timeline-bottom-gap);
  scrollbar-color: var(--jala-timeline-scrollbar-thumb) var(--jala-timeline-scrollbar-track);
  scrollbar-width: auto;
}

.jala-timeline__scroller::-webkit-scrollbar {
  height: var(--jala-timeline-scrollbar-height);
}

.jala-timeline__scroller::-webkit-scrollbar-track {
  border: 8px solid transparent;
  border-radius: 999px;
  background: var(--jala-timeline-scrollbar-track);
  background-clip: padding-box;
}

.jala-timeline__scroller::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
  border-radius: 999px;
  background: var(--jala-timeline-scrollbar-thumb);
  background-clip: padding-box;
}

.jala-timeline__track {
  position: relative;
  display: grid;
  --jala-timeline-column-width: calc((100cqw - (var(--jala-timeline-gap) * (var(--jala-timeline-columns-large) - 1))) / var(--jala-timeline-columns-large));
  width: max-content;
  grid-auto-columns: var(--jala-timeline-column-width);
  grid-auto-flow: column;
  gap: var(--jala-timeline-gap);
  min-width: 100%;
}

.jala-timeline__track::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 22px;
  right: calc(var(--jala-timeline-line-bleed) * -1);
  left: calc(var(--jala-timeline-line-bleed) * -1);
  height: 8px;
  border-radius: 999px;
  background: var(--jala-timeline-line-color);
}

.jala-timeline__item {
  position: relative;
  min-width: 0;
}

.jala-timeline__icon {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--jala-timeline-icon-bg);
  color: var(--jala-timeline-icon-color);
}

.jala-timeline__icon i {
  color: inherit;
  width: 32px;
  height: 32px;
  margin-right: 0 !important;
  font-size: 32px !important;
  line-height: 1;
  font-weight: 100;
}

.jala-timeline__body {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 68px;
}

.jala-timeline__title {
  margin: 0 0 var(--spacing-sm);
  color: var(--jala-timeline-title-color);
  font-family: var(--jala-timeline-title-font-family);
  font-size: var(--jala-timeline-title-font-size);
  font-style: var(--jala-timeline-title-font-style);
  font-weight: var(--jala-timeline-title-font-weight);
  letter-spacing: var(--jala-timeline-title-letter-spacing);
  line-height: var(--jala-timeline-title-line-height);
  text-transform: var(--jala-timeline-title-text-transform);
}

.jala-timeline__content {
  width: 100%;
  color: var(--jala-timeline-content-color);
  font-family: var(--jala-timeline-content-font-family);
  font-size: var(--jala-timeline-content-font-size);
  font-style: var(--jala-timeline-content-font-style);
  font-weight: var(--jala-timeline-content-font-weight);
  letter-spacing: var(--jala-timeline-content-letter-spacing);
  line-height: var(--jala-timeline-content-line-height);
  text-transform: var(--jala-timeline-content-text-transform);
}

.jala-timeline__content > :first-child {
  margin-top: 0;
}

.jala-timeline__content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .jala-timeline {
    --jala-timeline-bottom-gap: var(--spacing-md);
  }

  .jala-timeline__track {
    --jala-timeline-column-width: calc((100cqw - (var(--jala-timeline-gap) * (var(--jala-timeline-columns-medium) - 1))) / var(--jala-timeline-columns-medium));
  }
}

@media (max-width: 640px) {

  .jala-timeline {
    --jala-timeline-bottom-gap: var(--spacing-sm);
  }

  .jala-timeline__track {
    --jala-timeline-column-width: calc((100cqw - (var(--jala-timeline-gap) * (var(--jala-timeline-columns-small) - 1))) / var(--jala-timeline-columns-small));
  }

  .jala-timeline__icon {
    width: 52px;
    height: 52px;
  }
}