@layer components {
  .bubble {
    display: grid;
    place-items: center;
    width: 8rem;
    aspect-ratio: 1;
    padding: var(--space-4);
    border: 2px solid var(--accent, var(--color-brand-green));
    border-radius: var(--radius-full);
    background: color-mix(
      in srgb,
      var(--accent, var(--color-brand-green)) 12%,
      var(--color-white)
    );
    color: var(--accent, var(--color-brand-green));
    text-align: center;
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    line-height: 1.15;
    text-transform: uppercase;
  }
}