// Component / Section

.section{
  --paddingLeft: var(--columnPaddingSmall);
  --paddingRight: var(--columnPaddingLarge);

  --titleFontSize: var(--titleFontSizeLarge);
  --titleLineHeight: var(--titleLineHeightLarge);

  --textFontSize: var(--textFontSizeXLarge);
  --textLineHeight: var(--textLineHeightLarge);

  @include link;

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

    .caption,
    .subtitle{
      color:var(--accent-color);
      font-size:18px;
      line-height:23px;
      font-weight:600;
    }

    .caption{
      @include gap(24px, true);
    }

    .subtitle{
      @include gap(24px, true);
    }
    
    .title{
      @include gap(24px, true);
      color:var(--titleColor);
      font-size: var(--titleFontSize);
      line-height: var(--titleLineHeight);
      font-weight: 600;
    }
  }

  & > .body,
  & > .footer{
    padding:0 var(--paddingRight) 0 var(--paddingLeft);
  }

  .body{
    @include gap(24px, true);
  }

  .body,
  .footer{
    color:var(--textColor);
    font-size: var(--textFontSize);
    line-height: var(--textLineHeight);
  }
}

.right{
  .section{
    --paddingRight: var(--columnPaddingSmall);
  }
}

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

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

    --textFontSize: var(--textFontSizeLarge);
    --textLineHeight: var(--textLineHeightLarge);
  }
}

@include breakpoint($tablet-portrait){
  .section{
    --paddingRight: var(--columnPaddingMedium);

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

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

@include breakpoint($phone){
  .section{
    --paddingLeft:0;
    --paddingRight: var(--columnPaddingSmall);

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

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

    .header{
      .caption{
        margin-bottom:8px;
      }
    }
  }
}
