.changelog-page {
  min-height: 100vh;
  padding: 150px 32px 112px;
  background: #080c11;
  color: #f4f7fa;
}

.changelog-page__inner {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.changelog-page__header {
  max-width: 900px;
  margin-bottom: 84px;
}

.changelog-page__eyebrow {
  margin: 0 0 22px;
  color: #58acff;
  font: 10px Consolas, monospace;
  letter-spacing: .14em;
}

.changelog-page__header h1 {
  max-width: 860px;
  margin: 0;
  color: #f4f7fa;
  font-size: clamp(52px, 7vw, 92px);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .98;
}

.changelog-page__intro {
  max-width: 620px;
  margin: 28px 0 0;
  color: #8794a2;
  font-size: 15px;
  line-height: 1.75;
}

.changelog-releases {
  border-top: 1px solid #28333e;
}

.changelog-release {
  display: grid;
  grid-template-columns: minmax(210px, .34fr) minmax(0, .66fr);
  gap: clamp(48px, 8vw, 116px);
  padding: 48px 0 56px;
  border-bottom: 1px solid #28333e;
}

.changelog-release__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.changelog-release__index,
.changelog-release__status {
  color: #6f7e8c;
  font: 9px Consolas, monospace;
  letter-spacing: .13em;
}

.changelog-release__meta h2 {
  margin: 18px 0 12px;
  color: #b9c3cc;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1;
}

.changelog-release__meta time {
  color: #8794a2;
  font: 11px Consolas, monospace;
}

.changelog-release__status {
  margin-top: 24px;
}

.changelog-release.is-latest .changelog-release__index,
.changelog-release.is-latest .changelog-release__status,
.changelog-release.is-latest .changelog-release__meta h2 {
  color: #58acff;
}

.changelog-release__content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.changelog-release__content li,
.changelog-release__content p {
  margin: 0;
  color: #d2d9df;
  font-size: 15px;
  line-height: 1.75;
}

.changelog-release__content li {
  position: relative;
  padding: 0 0 14px 24px;
}

.changelog-release__content li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #58acff;
  content: "—";
}

.changelog-state {
  margin: 0;
  padding: 52px 0;
  border-bottom: 1px solid #28333e;
  color: #8794a2;
  font-size: 14px;
}

.changelog-state.is-error {
  color: #d9a2a2;
}

@media (max-width: 760px) {
  .changelog-page {
    padding: 122px 20px 80px;
  }

  .changelog-page__header {
    margin-bottom: 56px;
  }

  .changelog-page__header h1 {
    font-size: clamp(44px, 13vw, 62px);
  }

  .changelog-release {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 38px 0 44px;
  }
}