:host {
  --background: var(--bp-layer-background-200);
  --color: var(--bp-text-color-500);
  --border-radius: var(--bp-object-border-radius-100);
  --border: 0;
  --padding: var(--bp-size-600);
  --height: 100%;
  --width: 100%;
  --content-min-height: calc(var(--padding) * 6);
  display: block;
}

[part='internal'] {
  background: var(--background);
  border: var(--border);
  color: var(--color);
  border-radius: var(--border-radius);
  height: var(--height);
  width: var(--width);
  flex-direction: column;
  display: flex;
}

slot:not([name]) {
  display: block;
  height: 100%;
  padding: var(--padding);
  min-height: var(--content-min-height);
}

[name='footer'] {
  display: var(--internal-footer-display, contents);
  border-top: var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);
  align-items: center;
  padding: var(--padding);
  min-height: var(--bp-size-900);
}

[name='header'] {
  display: var(--internal-header-display, contents);
  border-bottom: var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);
  padding: var(--padding);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  align-items: center;
  min-height: var(--bp-size-900);
  overflow: hidden;
}

::slotted(img) {
  object-fit: cover;
  width: calc(100% + var(--padding) * 2);
  margin: calc(var(--padding) * -1);
}
