pico/scss/components/_card.scss

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

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

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

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

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

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

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

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

    @media (min-width: map-get($breakpoints, "xl")) {
      margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
      padding: $spacing-block*map-get($spacing-factor, "xl");
    }
  }

  // Remove last-child margin bottom
  > *:not(header):not(footer):not(pre):last-child {
    margin-bottom: 0;
  }
}