import{r as s,S as m,n as g,y as n,a as v}from"./ssvf-layout.js";var f=s`
  ${m}
  :host {
    display: grid;
    grid-template:
      "image header" 3em
      "image divider" 1em
      "image text" auto
      / 1fr 8fr;
    gap: 1em;
    background-color: var(--color-gray-lightest);
  }

  slot[name="image"]::slotted(*) {
    aspect-ratio: 1/2;
    grid-area: image;
    background-color: var(--image-bg-color, --color-gray-light);
  }

  slot[name="header"]::slotted(*) {
    grid-area: header;
    font-family: var(--font-family-header);
    width: fit-content;
  }

  sl-divider {
    background: var(--color-gold);
    grid-area: divider;
    height: 0.2em;
    width: 10em;
  }

  slot::part(body) {
    grid-area: text;
    font-size: clamp(1em, 1vw, 1.5em);
    font-family: var(--font-family-body);
    margin: 0;
    height: fit-content;
  }
`,c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,p=(l,r,t,a)=>{for(var e=a>1?void 0:a?h(r,t):r,o=l.length-1,d;o>=0;o--)(d=l[o])&&(e=(a?d(r,t,e):d(e))||e);return a&&e&&c(r,t,e),e};let i=class extends g{render(){return n`
      <header part="header">
        <slot name="header"></slot>
      </header>
      <slot name="image"></slot>
      <sl-divider part="divider"></sl-divider>
      <div part="body" class="ssvf_card__body">
        <slot></slot>
      </div>
    `}};i.styles=f;i=p([v("ssvf-card")],i);