.software-release-change {
  --change-accent: 148 163 184;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  padding: 1rem 1rem 1rem 1.2rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-bg-soft);
}

.software-release-change::before {
  position: absolute;
  inset-block: 0.75rem;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: rgb(var(--change-accent));
  content: "";
}

.software-release-change__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.software-release-change__badge,
.software-release-change__highlight {
  display: inline-flex;
  width: fit-content;
  min-height: 1.75rem;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgb(var(--change-accent) / 0.38);
  border-radius: 999px;
  background: rgb(var(--change-accent) / 0.1);
  color: rgb(var(--change-accent));
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.software-release-change__highlight {
  --change-accent: 165 180 252;
}

.software-release-change__title {
  margin: 0.75rem 0 0;
  color: var(--ui-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.software-release-change__description {
  max-width: 68ch;
  margin: 0.45rem 0 0;
  color: var(--ui-muted);
  line-height: 1.7;
  white-space: pre-wrap;
}

.software-release-change__figure {
  margin: 1rem 0 0;
}

.software-release-change__figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
}

.software-release-change--added {
  --change-accent: 110 231 183;
}

.software-release-change--improved {
  --change-accent: 103 232 249;
}

.software-release-change--fixed {
  --change-accent: 252 211 77;
}

.software-release-change--removed {
  --change-accent: 253 164 175;
}

.software-release-change--security {
  --change-accent: 196 181 253;
}

.software-release-change--performance {
  --change-accent: 94 234 212;
}

.software-release-change--uiux {
  --change-accent: 165 180 252;
}

.software-release-change--database {
  --change-accent: 125 211 252;
}

.software-release-change--breaking {
  --change-accent: 253 186 116;
}

.software-release-change--deprecated {
  --change-accent: 252 211 77;
}

.software-release-change--docs,
.software-release-change--internal,
.software-release-change--default {
  --change-accent: 203 213 225;
}

@media (max-width: 639.98px) {
  .software-release-change {
    padding: 0.95rem 0.9rem 0.95rem 1.1rem;
  }
}