:root {
  --button-background: var(--color-surface-tertiary);
  --button-background-hover: var(--color-surface-secondary);
  --button-color-hover: var(--color-text-secondary);
  --button-icon-hover-filter: grayscale(1) brightness(5);
  --button-color: var(--color-text-primary);
}

:root {
  --basic-button-background: var(--color-surface-neutral);
  --basic-button-color: var(--color-text-primary);
}

.block__anatomy-timeline {
  display: flex;
  justify-content: center;
  padding: var(--spacing-lg) 0;
}
.block__anatomy-timeline .wrapper {
  width: 100%;
  max-width: var(--container-xl-max-width);
}
.block__anatomy-timeline .wrapper .top h2 {
  color: var(--color-text-highlight);
  font: var(--type-h3);
  margin-bottom: var(--spacing-sm);
}
.block__anatomy-timeline .wrapper .top h3 {
  font: var(--type-h1);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}
.block__anatomy-timeline .wrapper .year-jumps {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.block__anatomy-timeline .wrapper .year-jumps .year-jump {
  border: none;
  outline: none;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--basic-button-background);
  white-space: nowrap;
  border-radius: var(--border-radius-primary);
  font: var(--type-b2);
  transition: background 0.3s;
  color: var(--basic-button-color);
}
@media screen and (hover: none) {
  .block__anatomy-timeline .wrapper .year-jumps .year-jump:active {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
  }
}
@media screen and (hover: hover) {
  .block__anatomy-timeline .wrapper .year-jumps .year-jump:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
  }
}
.block__anatomy-timeline .wrapper .year-jumps .year-jump.active {
  border: none;
  outline: none;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--basic-button-background);
  white-space: nowrap;
  border-radius: var(--border-radius-primary);
  font: var(--type-b2);
  transition: background 0.3s;
  color: var(--basic-button-color);
  background: var(--color-surface-tertiary);
}
@media screen and (hover: none) {
  .block__anatomy-timeline .wrapper .year-jumps .year-jump.active:active {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
  }
}
@media screen and (hover: hover) {
  .block__anatomy-timeline .wrapper .year-jumps .year-jump.active:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
  }
}
.block__anatomy-timeline .wrapper .timeline {
  overflow-x: scroll;
}
.block__anatomy-timeline .wrapper .timeline .timeline-inner {
  min-width: -moz-fit-content;
  min-width: fit-content;
  display: flex;
  gap: 200px;
  align-items: start;
  padding: var(--spacing-sm) 0;
  position: relative;
  padding-top: var(--spacing-md);
}
.block__anatomy-timeline .wrapper .timeline .timeline-inner::before {
  position: absolute;
  left: 0;
  top: 1.5px;
  width: 100%;
  content: "";
  border-top: 1px solid var(--color-border-primary);
}
.block__anatomy-timeline .wrapper .timeline .timeline-inner .timeline-item {
  border-left: 1px solid var(--color-border-primary);
  max-width: 400px;
  min-width: 400px;
  width: 100%;
  padding: 0 var(--spacing-smm);
  position: relative;
}
.block__anatomy-timeline .wrapper .timeline .timeline-inner .timeline-item::before {
  width: 2.2em;
  position: absolute;
  top: calc(0px - var(--spacing-md));
  border-top: 4px solid var(--color-text-highlight);
  content: "";
  font: var(--type-h3);
}
.block__anatomy-timeline .wrapper .timeline .timeline-inner .timeline-item time {
  font: var(--type-h3);
  color: var(--color-text-highlight);
  margin-bottom: 11px;
}
.block__anatomy-timeline .wrapper .timeline .timeline-inner .timeline-item p {
  font: var(--type-b2);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-smd);
}
.block__anatomy-timeline .wrapper .timeline .timeline-inner .timeline-item .media {
  width: 100%;
}
.block__anatomy-timeline .wrapper .timeline .timeline-inner .timeline-item .media img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-primary);
}
@media screen and (max-width: 768px) {
  .block__anatomy-timeline .wrapper .year-jumps {
    flex-wrap: wrap;
    max-width: 90%;
  }
  .block__anatomy-timeline .wrapper .timeline .timeline-inner {
    gap: 0;
  }
  .block__anatomy-timeline .wrapper .timeline .timeline-inner .timeline-item {
    max-width: min(80vw, 400px);
    min-width: min(80vw, 400px);
  }
}