

.image-slot {
  
  aspect-ratio: var(--slot-ratio, 16 / 9);
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--space-4);

  background-color: var(--color-bg-elevated);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 10px,
    var(--color-accent-subtle) 10px 20px
  );
  
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);

min-width: 0;
}

.image-slot__brief {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  max-width: 42ch;
  text-align: center;
  color: var(--color-text);

hyphens: none;
}

.image-slot__id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-accent);

overflow-wrap: anywhere;
}

.image-slot__what {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-wrap: pretty;
}

.image-slot__source {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.image-slot[data-source="Christoph"] {
  
}

@media print {
  .image-slot { background-image: none; }
}

.service-list__shots > .image-slot {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

.service-list__shots > .image-slot > .image-slot__brief {
  max-width: none;
  overflow: hidden;
  gap: 0;
}

.service-list__shots > .image-slot .image-slot__what,
.service-list__shots > .image-slot .image-slot__source {
  font-size: var(--font-size-sm);
}

.showcase__pane > .frame > .image-slot {
  overflow: hidden;
}

.showcase__pane > .frame > .image-slot > .image-slot__brief {
  max-width: none;
  overflow: hidden;
  gap: 0;
}

.copy-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  min-width: 0;

  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  hyphens: none;
}

.copy-slot__label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-error);
  overflow-wrap: anywhere;
}

.copy-slot__what {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.prose [data-unconfirmed] {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--color-error);
  text-underline-offset: 0.25em;
}
