pico/scss/components/_card-sectioning.scss

/**
 * Card sectionning (<article> > header, footer, pre)
 */

article {
  > header,
  > footer {
    background-color: var(--card-sections);
  }
  > header,
  > footer,
  > pre {
    margin: calc(var(--spacing-gutter) * -1);
    padding: var(--spacing-block) var(--spacing-gutter);

    @if map-get($breakpoints, "sm") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "sm")) {
        margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
        padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
      }
    }

    @if map-get($breakpoints, "md") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "md")) {
        margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
        padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
      }
    }

    @if map-get($breakpoints, "lg") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "lg")) {
        margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
        padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
      }
    }

    @if map-get($breakpoints, "xl") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "xl")) {
        margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
        padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
      }
    }
  }
  > header {
    margin-top: calc(var(--spacing-gutter) * -2);
    margin-bottom: var(--spacing-block);

    @if map-get($breakpoints, "sm") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "sm")) {
        margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
      }
    }

    @if map-get($breakpoints, "md") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "md")) {
        margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
      }
    }

    @if map-get($breakpoints, "lg") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "lg")) {
        margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
      }
    }

    @if map-get($breakpoints, "xl") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "xl")) {
        margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
      }
    }
  }
  > footer,
  > pre {
    margin-top: var(--spacing-block);
    margin-bottom: calc(var(--spacing-gutter) * -2);

    @if map-get($breakpoints, "sm") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "sm")) {
        margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
      }
    }

    @if map-get($breakpoints, "md") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "md")) {
        margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
      }
    }

    @if map-get($breakpoints, "lg") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "lg")) {
        margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
      }
    }

    @if map-get($breakpoints, "xl") and
      $enable-responsive-spacings {

      @media (min-width: map-get($breakpoints, "xl")) {
        margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
      }
    }
  }
}