@layer components {
  .risk-activity {
    padding-inline: var(--inline-space);
  }

  .risk-activity__timeline {
    border-inline-start: 2px solid var(--color-ink-lighter);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-inline-start: 0.5rem;
    padding-inline-start: 1rem;
  }

  .risk-activity__event {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0.4rem;
    position: relative;
  }

  .risk-activity__dot {
    background-color: var(--color-ink-lighter);
    block-size: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: 0.5rem;
    margin-block-start: 0.35rem;
    position: absolute;
    inset-inline-start: calc(-1rem - 0.25rem - 1px);
  }

  .risk-activity__content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
  }
}