:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --border-color: The card's border color, including borders that occur inside the card.
 * @prop --border-radius: The border radius for card edges.
 * @prop --border-width: The width of card borders.
 * @prop --padding: The padding to use for card sections.
 */
:host {
  --border-color: var(--sl-color-gray-200);
  --border-radius: var(--sl-border-radius-medium);
  --border-width: 1px;
  --padding: var(--sl-spacing-large);
  display: inline-block;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--sl-color-white);
  box-shadow: var(--sl-shadow-x-small);
  border: solid var(--border-width) var(--border-color);
  border-radius: var(--border-radius);
}

.card__image {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  margin: calc(-1 * var(--border-width));
  overflow: hidden;
}
.card__image ::slotted(img) {
  display: block;
  width: 100%;
}

.card:not(.card--has-image) .card__image {
  display: none;
}

.card__header {
  border-bottom: solid var(--border-width) var(--border-color);
  padding: calc(var(--padding) / 2) var(--padding);
}

.card:not(.card--has-header) .card__header {
  display: none;
}

.card__body {
  padding: var(--padding);
}

.card--has-footer .card__footer {
  border-top: solid var(--border-width) var(--border-color);
  padding: var(--padding);
}

.card:not(.card--has-footer) .card__footer {
  display: none;
}