pico/scss/components/_card.scss

/**
 * Card (<article>)
 */

article {
  margin: var(--spacing-block) 0;
  padding: var(--spacing-block) var(--spacing-gutter);
  overflow: hidden;
  border-radius: var(--block-round);
  background: var(--card-background);
  box-shadow: var(--card-shadow);

  @if map-get($breakpoints, "sm") {
    @media (min-width: map-get($breakpoints, "sm")) {
      @if $enable-responsive-spacings {
        margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;
        padding: calc(var(--spacing-block) * var(--spacing-factor-sm));
      }
      @else {
        margin: var(--spacing-block) 0;
        padding: var(--spacing-block);
      }
    }
  }

  @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)) 0;
      padding: 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)) 0;
      padding: 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)) 0;
      padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
    }
  }

  // Remove last-child margin bottom
  @if $enable-important {
    > *:not(header):not(footer):not(pre):last-child {
      margin-bottom: 0 !important;
    }
  }
}