/* ==========================================================================
   MILESTONE BOXES
   Achievement/milestone display component
   ========================================================================== */

@layer components {
  /* Milestone Boxes */
  .milestone-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
    margin-top: var(--block-space);
  }

  .milestone-box {
    flex: 1;
    min-width: var(--option-card-min-width);
    padding: var(--block-space);
    border-radius: var(--border-radius);
    text-align: center;
    color: var(--color-ink-inverted);
    font-size: var(--text-footnote);
    line-height: var(--leading-snug);
  }

  .milestone-box strong {
    display: block;
    font-size: var(--text-subhead);
    margin-bottom: var(--block-space-quarter);
  }
}