// Component / Stat

.stat{
  --paddingLeft: var(--columnPaddingSmall);
  --paddingRight: var(--columnPaddingMedium);

  --titleFontSize: var(--titleFontSizeMedium);
  --titleLineHeight: var(--titleLineHeightMedium);

  --textFontSize: var(--textFontSizeMedium);
  --textLineHeight: var(--textLineHeightMedium);

  @include link;

  .header{
    @include gap(10px);
    padding:0 var(--paddingRight) 0 var(--paddingLeft);

    .caption{
      color:var(--accent-title);
    }
    
    .title{
      color:var(--titleColor);
      font-size: var(--titleFontSize);
      line-height: var(--titleLineHeight);
      font-weight:600;
    }
  }

  .body{
    padding:0 var(--paddingRight) 0 var(--paddingLeft);
    color:var(--textColor);
    font-size: var(--textFontSize);
    line-height: var(--textLineHeight);
  }
}

@include breakpoint($laptop-tablet){
  .stat{
    --paddingLeft: 0;
  }
}
