.dodont {
  border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
  border-radius: var(--ds-border-radius-md);
  width: fit-content;
  display: grid;
  overflow: hidden;
  grid-template-rows: auto 1fr auto;
  margin-top: var(--ds-size-6);

  .preview {
    padding: var(--ds-size-6);
  }
  .preview {
    background-color: var(--ds-color-neutral-surface-default);
  }
  .live-preview {
    /*@TODO: layout selectors?*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-size-6);
    flex-wrap: wrap;
  }
  .header {
    border-bottom: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
    padding: var(--ds-size-4) var(--ds-size-6);
    background-color: var(--ds-color-surface-tinted);
    color: var(--ds-color-text-default);
    display: flex;
    align-items: center;
    gap: var(--ds-size-2);
    p {
      margin: 0;
      font-weight: 500;
    }
    svg {
      color: var(--ds-color-base-default);
      font-size: 2rem;
    }
  }
  .footer {
    background-color: var(--ds-color-neutral-surface-default);
    border-top: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
    padding: var(--ds-size-4) var(--ds-size-6);
    color: var(--ds-color-neutral-text-subtle);
    contain: inline-size; /*maybe/maybe not do this (footer text does not contribute to card-width but is constrained by content above and maybe a min-width)*/
    > p {
      margin: 0;
      font-weight: 400;
      max-width: 65ch;
      text-wrap: pretty;
    }
  }
}
/*TODO: needs more work*/
:global(.dodont-row) {
  column-gap: var(--ds-size-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  margin-bottom: var(--ds-size-8);
}
