.mtd-timeline {
  --mtd-visible: 3;
  --mtd-gap: 76px;
  --mtd-date-color: #85817e;
  --mtd-marker-color: #55c49d;
  --mtd-line-color: #e7e2de;
  position: relative;
  width: 100%;
  padding-top: 0;
}
.mtd-timeline .mtd-viewport {
  position: relative;
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  outline: none;
  padding: 0 0 8px;
}
.mtd-timeline .mtd-viewport::-webkit-scrollbar { display: none; }
.mtd-timeline .mtd-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--mtd-gap);
  width: max-content;
  min-width: 100%;
  padding: 0;
}
.mtd-timeline .mtd-item {
  position: relative;
  flex: 0 0 var(--mtd-item-width, calc((100cqw - (var(--mtd-visible) - 1) * var(--mtd-gap)) / var(--mtd-visible)));
  min-width: 0;
  box-sizing: border-box;
  padding-top: 0;
}
.mtd-timeline .mtd-date {
  min-height: 24px;
  color: var(--mtd-date-color);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
}
.mtd-timeline .mtd-marker {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  margin-top: 14px;
  border-radius: 50%;
  background: var(--mtd-marker-color);
}
.mtd-timeline .mtd-axis {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 48px;
  height: 1px;
  background: var(--mtd-line-color);
}
.mtd-timeline .mtd-card {
  margin-top: 36px;
  padding: 38px 24px 24px;
  border-radius: 24px;
  background: #fff;
  color: #111;
  font-size: 22px;
  line-height: 1.7;
  box-shadow: 0 5px 22px rgba(34, 27, 22, .045);
  overflow-wrap: anywhere;
}
.mtd-timeline .mtd-card p { margin: 0 0 .8em; }
.mtd-timeline .mtd-card p:last-child { margin-bottom: 0; }
.mtd-timeline .mtd-nav {
    position: absolute;
    z-index: 3;
    top: -15px;
    right: -36px;
    display: flex;
    gap: 4px;
}
.mtd-timeline .mtd-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #b9b6b3;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}
.mtd-timeline .mtd-nav button:hover { opacity: .82; }
.mtd-timeline .mtd-nav button:disabled { opacity: .45; cursor: default; }
.mtd-timeline .mtd-nav button span {
  width: 13px;
  height: 13px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.mtd-timeline .mtd-nav .mtd-prev span { transform: rotate(-135deg); margin-left: 5px; }
.mtd-timeline .mtd-nav .mtd-next span { transform: rotate(45deg); margin-right: 5px; }
.mtd-timeline:has(.mtd-nav) .mtd-date { padding-right: 0px; }
@media (max-width: 1024px) {
  .mtd-timeline .mtd-date { font-size: 16px; }
  .mtd-timeline .mtd-card { font-size: 19px; }
  .mtd-timeline .mtd-nav button { width: 44px; height: 44px; }
  .mtd-timeline:has(.mtd-nav) .mtd-date { padding-right: 96px; }
  .mtd-timeline .mtd-nav {right: 0px;}
}
@media (max-width: 767px) {
  .mtd-timeline { --mtd-visible: 1; }
  .mtd-timeline .mtd-date { font-size: 15px; }
  .mtd-timeline .mtd-card { padding: 26px 22px 22px; font-size: 18px; line-height: 1.55; }
  .mtd-timeline .mtd-nav button { width: 38px; height: 38px; }
  .mtd-timeline .mtd-nav button span { width: 11px; height: 11px; }
  .mtd-timeline:has(.mtd-nav) .mtd-date { padding-right: 86px; }
}