:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
  --pico-card-background-color: light-dark(var(--pico-background-color), #181c25);
  --pico-card-border-color: light-dark(var(--pico-muted-border-color), var(--pico-card-background-color));
  --pico-card-box-shadow: var(--pico-box-shadow);
  --pico-card-sectioning-background-color: light-dark(#fbfcfc, #1a1f28);
}

article {
  margin-bottom: var(--pico-block-spacing-vertical);
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

article > header, article > footer {
  margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
  margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
  padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);
  background-color: var(--pico-card-sectioning-background-color);
}

article > 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-top-right-radius: var(--pico-border-radius);
  border-top-left-radius: var(--pico-border-radius);
}

article > 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-bottom-right-radius: var(--pico-border-radius);
  border-bottom-left-radius: var(--pico-border-radius);
}