/* Card: article, with header and footer as direct children */
article {
  margin-bottom: var(--pico-block-spacing-vertical);
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
  border-radius: var(--pico-card-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);

  & > header,
  & > footer {
    margin-inline: calc(var(--pico-block-spacing-horizontal) * -1);
    padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
    background-color: var(--pico-card-sectioning-background-color);
  }

  & > header {
    margin-top: calc(var(--pico-block-spacing-vertical) * -1);
    margin-bottom: var(--pico-block-spacing-vertical);
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    border-start-start-radius: var(--pico-card-border-radius);
    border-start-end-radius: var(--pico-card-border-radius);
  }

  & > footer {
    margin-top: var(--pico-block-spacing-vertical);
    margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
    border-top: var(--pico-border-width) solid var(--pico-card-border-color);
    border-end-start-radius: var(--pico-card-border-radius);
    border-end-end-radius: var(--pico-card-border-radius);
  }
}