@layer components {

  .riskjar-logo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border-radius: 18%;
    overflow: hidden;
    aspect-ratio: 1;
    flex-shrink: 0;
    background: var(--color-canvas);

    > span {
      aspect-ratio: 1;
    }

    /* Bottom-left (low risk) to top-right (critical) */
    /* Row 1 (top): higher risk */
    > span:nth-child(1) { background: oklch(var(--lch-risk-medium)); }
    > span:nth-child(2) { background: oklch(var(--lch-risk-high)); }
    > span:nth-child(3) { background: oklch(var(--lch-risk-critical)); }
    /* Row 2 (middle) */
    > span:nth-child(4) { background: oklch(var(--lch-risk-low)); }
    > span:nth-child(5) { background: oklch(var(--lch-risk-medium)); }
    > span:nth-child(6) { background: oklch(var(--lch-risk-high)); }
    /* Row 3 (bottom): lower risk */
    > span:nth-child(7) { background: oklch(var(--lch-risk-lowest)); }
    > span:nth-child(8) { background: oklch(var(--lch-risk-low)); }
    > span:nth-child(9) { background: oklch(var(--lch-risk-medium)); }
  }
}