diff --git a/packages/base/default-templates/card-info.gts b/packages/base/default-templates/card-info.gts
index d4ddb35e48..a051360b29 100644
--- a/packages/base/default-templates/card-info.gts
+++ b/packages/base/default-templates/card-info.gts
@@ -131,181 +131,183 @@ interface EditSignature {
 
 class CardInfoEditor extends GlimmerComponent<EditSignature> {
   <template>
-    <div class='cardInfo-editor'>
-      <Button
-        class={{cn 'preview-toggle' is-preview-visible=this.isPreviewVisible}}
-        @size='extra-small'
-        @kind='text-only'
-        {{on 'click' this.togglePreview}}
-        data-test-toggle-preview
-      >
-        {{if this.isPreviewVisible 'Hide' 'Show'}}
-        Default Preview
-        <ChevronRight
-          class='preview-toggle-icon'
-          width='14'
-          height='14'
-          role='presentation'
-        />
-      </Button>
-      {{#if this.isPreviewVisible}}
-        <div class='default-preview'>
-          <FieldContainer
-            @label='Card Type'
-            @icon={{@model.constructor.icon}}
-            data-test-edit-preview='cardType'
-          >
-            {{@model.constructor.displayName}}
-          </FieldContainer>
-          {{#each this.previewFields as |item|}}
-            {{#let item.Field as |Field|}}
-              <FieldContainer
-                @label={{item.label}}
-                @icon={{if
-                  (eq item.key 'cardThumbnailURL')
-                  LinkIcon
-                  (getFieldIcon @model item.key)
-                }}
-                data-test-edit-preview={{item.key}}
-                data-edit-preview-field={{item.key}}
-              >
-                {{#if item.value}}
-                  <Field @format='atom' />
-                {{else}}
-                  <em class='null-preview'>
-                    {{#if (and (eq item.key 'cardTheme') @hideThemeChooser)}}
-                      (Self)
-                    {{else}}
-                      None
-                    {{/if}}
-                  </em>
-                {{/if}}
-              </FieldContainer>
-            {{/let}}
-          {{/each}}
-        </div>
-      {{/if}}
-      <FieldContainer class='main-fields'>
-        <:label>
-          <div class='cardInfo-thumbnail-container'>
-            <CardInfoImageContainer
-              class='cardInfo-thumbnail-preview'
-              @cardThumbnailURL={{@model.cardThumbnailURL}}
-              @icon={{@model.constructor.icon}}
-              data-test-thumbnail-image
-            />
-            <Button
-              class='cardInfo-thumbnail-popup-toggle'
-              @size='extra-small'
-              @kind='secondary-light'
-              {{on 'click' this.toggleThumbnailEditor}}
-              data-test-toggle-thumbnail-editor
-            >
-              Change
-              {{#unless @hideThemeChooser}}Theme & {{/unless}}Thumbnail
-            </Button>
-          </div>
-        </:label>
-        <:default>
-          <div class='card-info-edit-fields'>
+    <div class='card-info-editor'>
+      <div class='card-info-preview-group'>
+        <Button
+          class={{cn 'preview-toggle' is-preview-visible=this.isPreviewVisible}}
+          @size='extra-small'
+          @kind='text-only'
+          {{on 'click' this.togglePreview}}
+          data-test-toggle-preview
+        >
+          {{if this.isPreviewVisible 'Hide' 'Show'}}
+          Default Preview
+          <ChevronRight
+            class='preview-toggle-icon'
+            width='14'
+            height='14'
+            role='presentation'
+          />
+        </Button>
+        {{#if this.isPreviewVisible}}
+          <div class='default-preview'>
             <FieldContainer
-              class='card-info-field'
-              @label='Name'
-              @tag='label'
-              @labelFontSize='default'
-              @icon={{NameIcon}}
-              @vertical={{true}}
-              data-test-field='cardInfo-name'
-            >
-              <@fields.cardInfo.name />
-            </FieldContainer>
-            <FieldContainer
-              class='card-info-field'
-              @label='Summary'
-              @tag='label'
-              @labelFontSize='default'
-              @icon={{SummaryIcon}}
-              @vertical={{true}}
-              data-test-field='cardInfo-summary'
+              class='preview-field'
+              @label='Card Type'
+              @icon={{@model.constructor.icon}}
+              data-test-edit-preview='cardType'
             >
-              <@fields.cardInfo.summary />
+              {{@model.constructor.displayName}}
             </FieldContainer>
+            {{#each this.previewFields as |item|}}
+              {{#let item.Field as |Field|}}
+                <FieldContainer
+                  class='preview-field'
+                  @label={{item.label}}
+                  @icon={{if
+                    (eq item.key 'cardThumbnailURL')
+                    LinkIcon
+                    (getFieldIcon @model item.key)
+                  }}
+                  data-test-edit-preview={{item.key}}
+                  data-edit-preview-field={{item.key}}
+                >
+                  {{#if item.value}}
+                    <Field @format='atom' />
+                  {{else}}
+                    <em class='null-preview'>
+                      {{#if (and (eq item.key 'cardTheme') @hideThemeChooser)}}
+                        (Self)
+                      {{else}}
+                        None
+                      {{/if}}
+                    </em>
+                  {{/if}}
+                </FieldContainer>
+              {{/let}}
+            {{/each}}
           </div>
-        </:default>
-      </FieldContainer>
-      {{#if this.isThumbnailEditorVisible}}
-        <div class='hidden-fields'>
+        {{/if}}
+      </div>
+      <div class='card-info-fields'>
+        <CardInfoImageContainer
+          class='card-info-thumbnail-preview'
+          @cardThumbnailURL={{@model.cardThumbnailURL}}
+          @icon={{@model.constructor.icon}}
+          data-test-thumbnail-image
+        />
+        <div class='card-info-edit-fields card-info-edit-field-group'>
           <FieldContainer
             class='card-info-field'
-            @label='Thumbnail URL'
+            @label='Name'
             @tag='label'
-            @icon={{ImageIcon}}
-            data-test-field='cardInfo-thumbnailURL'
+            @labelFontSize='default'
+            @icon={{NameIcon}}
+            @vertical={{true}}
+            data-test-field='cardInfo-name'
           >
-            <div class='thumbnail-picker' data-thumbnail-picker-controls>
-              <div class='thumbnail-picker-inputs'>
-                <span
-                  class='thumbnail-picker-input-slot'
-                  data-test-thumbnail-input
-                >
-                  <@fields.cardInfo.cardThumbnailURL />
-                </span>
-                {{#if this.hasThumbnailUrl}}
-                  <IconButton
-                    class='thumbnail-picker-clear'
-                    @icon={{XIcon}}
-                    @width='16px'
-                    @height='16px'
-                    aria-label='Clear thumbnail'
-                    data-test-thumbnail-clear
-                    {{on 'click' this.clearThumbnail}}
-                  />
-                {{else if this.computedThumbnailFallback}}
-                  <span
-                    class='thumbnail-picker-placeholder'
-                    data-test-thumbnail-placeholder
-                    aria-hidden='true'
-                  >{{this.computedThumbnailFallback}}</span>
-                {{/if}}
-              </div>
-              {{#unless this.hasThumbnailUrl}}
-                <span class='thumbnail-picker-or'>or</span>
-                <Button
-                  @kind='secondary'
-                  @size='extra-small'
-                  data-test-thumbnail-select-image
-                  {{on 'click' this.selectThumbnailImage}}
-                >
-                  Select Image
-                </Button>
-              {{/unless}}
-            </div>
+            <@fields.cardInfo.name />
+          </FieldContainer>
+          <FieldContainer
+            class='card-info-field'
+            @label='Summary'
+            @tag='label'
+            @labelFontSize='default'
+            @icon={{SummaryIcon}}
+            @vertical={{true}}
+            data-test-field='cardInfo-summary'
+          >
+            <@fields.cardInfo.summary />
           </FieldContainer>
-          {{#unless @hideThemeChooser}}
+        </div>
+        <Button
+          class='card-info-thumbnail-popup-toggle'
+          @size='extra-small'
+          @kind='secondary-light'
+          {{on 'click' this.toggleThumbnailEditor}}
+          data-test-toggle-thumbnail-editor
+        >
+          Change
+          {{#unless @hideThemeChooser}}Theme & {{/unless}}Thumbnail
+        </Button>
+        {{#if this.isThumbnailEditorVisible}}
+          <div class='hidden-fields card-info-edit-field-group'>
             <FieldContainer
-              class='card-info-field theme-field'
-              @label='Theme'
-              @icon={{ThemeIcon}}
-              data-test-field='cardInfo-theme'
+              class='card-info-field'
+              @label='Thumbnail URL'
+              @icon={{ImageIcon}}
+              data-test-field='cardInfo-thumbnailURL'
             >
-              <@fields.cardInfo.theme />
+              <div class='thumbnail-picker' data-thumbnail-picker-controls>
+                <div class='thumbnail-picker-inputs'>
+                  <span
+                    class='thumbnail-picker-input-slot'
+                    data-test-thumbnail-input
+                  >
+                    <@fields.cardInfo.cardThumbnailURL />
+                  </span>
+                  {{#if this.hasThumbnailUrl}}
+                    <IconButton
+                      class='thumbnail-picker-clear'
+                      @icon={{XIcon}}
+                      @width='16px'
+                      @height='16px'
+                      aria-label='Clear thumbnail'
+                      data-test-thumbnail-clear
+                      {{on 'click' this.clearThumbnail}}
+                    />
+                  {{else if this.computedThumbnailFallback}}
+                    <span
+                      class='thumbnail-picker-placeholder'
+                      data-test-thumbnail-placeholder
+                      aria-hidden='true'
+                    >{{this.computedThumbnailFallback}}</span>
+                  {{/if}}
+                </div>
+                {{#unless this.hasThumbnailUrl}}
+                  <span class='thumbnail-picker-or'>or</span>
+                  <Button
+                    @kind='secondary'
+                    @size='extra-small'
+                    data-test-thumbnail-select-image
+                    {{on 'click' this.selectThumbnailImage}}
+                  >
+                    Select Image
+                  </Button>
+                {{/unless}}
+              </div>
             </FieldContainer>
-          {{/unless}}
-        </div>
-      {{/if}}
+            {{#unless @hideThemeChooser}}
+              <FieldContainer
+                class='card-info-field theme-field'
+                @label='Theme'
+                @icon={{ThemeIcon}}
+                data-test-field='cardInfo-theme'
+              >
+                <@fields.cardInfo.theme />
+              </FieldContainer>
+            {{/unless}}
+          </div>
+        {{/if}}
+      </div>
     </div>
     <style scoped>
-      .cardInfo-editor {
-        --thumbnail-container-size: 6.25rem;
+      .card-info-editor {
+        container-name: card-info-editor-template;
+        container-type: inline-size;
         position: relative;
         width: 100%;
         max-width: 100%;
       }
+
+      .card-info-preview-group {
+        display: grid;
+        gap: var(--boxel-sp-xs);
+      }
       .preview-toggle {
-        position: absolute;
-        top: calc(-1 * var(--boxel-sp-lg));
-        right: 0;
         min-width: 10.5rem;
+        margin-left: auto;
+        margin-top: calc(-1 * var(--boxel-sp-xs));
         justify-content: space-between;
       }
       .preview-toggle-icon {
@@ -314,36 +316,61 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
       .is-preview-visible .preview-toggle-icon {
         transform: rotate(-90deg);
       }
-      .preview-toggle + .default-preview {
-        margin-top: var(--boxel-sp-lg);
-      }
-      .default-preview + .main-fields {
-        margin-top: var(--boxel-sp-lg);
-      }
       .default-preview {
-        padding: var(--boxel-sp-lg);
-        background-color: var(--accent, var(--boxel-200));
-        border-radius: var(--radius, var(--boxel-border-radius));
-        color: var(--accent-foreground, var(--boxel-dark));
+        display: grid;
+        gap: var(--boxel-sp);
+        margin-top: var(--boxel-sp-xs);
+        margin-bottom: var(--boxel-sp-xl);
+        padding-top: var(--boxel-sp-xl);
+        padding-inline: var(--boxel-sp-lg);
+        padding-bottom: var(--boxel-sp-lg);
+        background-color: var(--accent);
+        border-radius: var(--radius);
+        color: var(--accent-foreground);
       }
-      .cardInfo-thumbnail-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding-right: var(--boxel-sp-xl);
+      .preview-field,
+      .preview-field > :deep(.label-container) {
+        --boxel-field-content-padding: 0;
+        min-height: unset;
+        padding-top: unset;
       }
-      .cardInfo-thumbnail-preview {
-        border: 1px solid var(--border, var(--boxel-form-control-border-color));
+
+      .card-info-fields {
+        --thumbnail-container-size: 6.25rem;
+        display: grid;
+        grid-template-areas:
+          'thumbnail name-summary'
+          'thumbnail-toggle name-summary'
+          'hidden-fields hidden-fields';
+        grid-template-columns:
+          var(--boxel-field-label-size, minmax(8rem, 25%))
+          1fr;
+        align-items: start;
+        justify-items: center;
+      }
+      .card-info-thumbnail-preview {
+        grid-area: thumbnail;
+        margin-top: var(--boxel-sp-sm);
+        margin-right: var(--boxel-sp-xl);
+        border: 1px solid var(--border);
       }
-      .cardInfo-thumbnail-popup-toggle {
+      .card-info-thumbnail-popup-toggle {
+        grid-area: thumbnail-toggle;
         margin-top: var(--boxel-sp-xs);
+        margin-right: var(--boxel-sp-xl);
       }
-      .card-info-field + .card-info-field {
-        margin-top: var(--boxel-sp-lg);
+      .card-info-edit-fields {
+        grid-area: name-summary;
       }
       .hidden-fields {
+        grid-area: hidden-fields;
         margin-top: var(--boxel-sp);
       }
+      .card-info-edit-field-group {
+        width: 100%;
+        display: grid;
+        gap: var(--boxel-sp-lg);
+      }
       .theme-field :deep(.links-to-editor .field-component-card) {
         min-height: var(--boxel-form-control-height);
       }
@@ -409,6 +436,46 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         overflow-wrap: anywhere;
         min-width: 0;
       }
+
+      @container card-info-editor-template (width < 425px) {
+        .card-info-preview-group {
+          margin-bottom: var(--boxel-sp);
+        }
+        .preview-toggle {
+          margin-top: unset;
+        }
+        .default-preview {
+          margin-top: unset;
+          margin-bottom: var(--boxel-sp-xs);
+        }
+        .card-info-fields {
+          --thumbnail-container-size: 4.375rem;
+          grid-template-columns: var(--thumbnail-container-size) 1fr;
+          gap: var(--boxel-sp-sm);
+          align-items: flex-end;
+        }
+        .card-info-edit-field-group {
+          gap: var(--boxel-sp-xs);
+        }
+        .card-info-thumbnail-preview {
+          margin-top: 0;
+          margin-right: 0;
+        }
+        .card-info-thumbnail-popup-toggle {
+          align-self: start;
+          max-width: var(--thumbnail-container-size);
+          min-width: unset;
+          margin-top: 0;
+          margin-inline: 0;
+          padding-inline: 0;
+          border-radius: var(--boxel-border-radius-sm);
+          font-size: 0.6875rem;
+        }
+        .card-info-thumbnail-preview :deep(.icon) {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+      }
     </style>
   </template>
 
diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 89ccae24ed..e0c25b6fd9 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -61,58 +61,63 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       class={{cn 'default-card-template' @format}}
       data-test-base-template={{@format}}
     >
-      <Header @hasBottomBorder={{true}} class='card-info-header'>
-        {{#if (eq @format 'isolated')}}
-          <CardInfoTemplates.view
-            @cardTitle={{@model.cardTitle}}
-            @cardDescription={{@model.cardDescription}}
-            @cardThumbnailURL={{@model.cardThumbnailURL}}
-            @icon={{@model.constructor.icon}}
-          />
-        {{else}}
-          <CardInfoTemplates.edit
-            @fields={{@fields}}
-            @model={{@model}}
-            @hideThemeChooser={{this.isThemeCard}}
-          />
+      <div class={{cn 'default-card-template--inner' @format}}>
+        <Header @hasBottomBorder={{true}} class='card-info-header'>
+          {{#if (eq @format 'isolated')}}
+            <CardInfoTemplates.view
+              @cardTitle={{@model.cardTitle}}
+              @cardDescription={{@model.cardDescription}}
+              @cardThumbnailURL={{@model.cardThumbnailURL}}
+              @icon={{@model.constructor.icon}}
+            />
+          {{else}}
+            <CardInfoTemplates.edit
+              @fields={{@fields}}
+              @model={{@model}}
+              @hideThemeChooser={{this.isThemeCard}}
+            />
+          {{/if}}
+        </Header>
+        {{#if this.displayFields}}
+          <section class='own-display-fields'>
+            {{#each-in this.displayFields as |key Field|}}
+              <FieldContainer
+                @label={{startCase key}}
+                @icon={{getFieldIcon @model key}}
+                data-test-field={{key}}
+              >
+                <Field class='in-isolated' />
+              </FieldContainer>
+            {{/each-in}}
+          </section>
         {{/if}}
-      </Header>
-      {{#if this.displayFields}}
-        <section class='own-display-fields'>
-          {{#each-in this.displayFields as |key Field|}}
-            <FieldContainer
-              @label={{startCase key}}
-              @icon={{getFieldIcon @model key}}
-              data-test-field={{key}}
-            >
-              <Field class='in-isolated' />
-            </FieldContainer>
-          {{/each-in}}
-        </section>
-      {{/if}}
-      <footer class='notes-footer'>
-        <FieldContainer
-          @label='Notes'
-          @icon={{getFieldIcon @model.cardInfo 'notes'}}
-          data-test-field='cardInfo-notes'
-        >
-          <@fields.cardInfo.notes />
-        </FieldContainer>
-      </footer>
+        <footer class='notes-footer'>
+          <FieldContainer
+            @label='Notes'
+            @icon={{getFieldIcon @model.cardInfo 'notes'}}
+            data-test-field='cardInfo-notes'
+          >
+            <@fields.cardInfo.notes />
+          </FieldContainer>
+        </footer>
+      </div>
     </div>
     <style scoped>
       .default-card-template {
-        --hr-color: rgba(0 0 0 / 10%);
+        container-name: default-template;
+        container-type: inline-size;
+      }
+      .default-card-template--inner {
+        --boxel-default-template-padding: var(--boxel-sp-xl);
+        --boxel-default-template-hr-color: rgba(0 0 0 / 10%);
         display: grid;
       }
       .card-info-header {
         --boxel-header-min-height: 9.375rem; /* 150px */
-        --boxel-header-padding: var(--boxel-sp-xxl) var(--boxel-sp-xl)
-          var(--boxel-sp-xl);
+        --boxel-header-padding: var(--boxel-default-template-padding);
         --boxel-header-gap: var(--boxel-sp-lg);
-        --boxel-header-border-color: var(--hr-color);
-        align-items: flex-start;
-        background-color: var(--muted, var(--boxel-100));
+        --boxel-header-border-color: var(--boxel-default-template-hr-color);
+        background-color: var(--muted);
       }
       .card-info-header :deep(.info) {
         align-self: center;
@@ -123,14 +128,14 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       .own-display-fields {
         display: grid;
         gap: var(--boxel-sp-lg);
-        padding: var(--boxel-sp-xl);
-        background-color: var(--background, var(--boxel-light));
+        padding: var(--boxel-default-template-padding);
+        background-color: var(--background);
       }
       .own-display-fields + .notes-footer {
-        border-top: 1px solid var(--hr-color);
+        border-top: 1px solid var(--boxel-default-template-hr-color);
       }
       .notes-footer {
-        padding: var(--boxel-sp-xl);
+        padding: var(--boxel-default-template-padding);
       }
       .tags {
         display: flex;
@@ -138,11 +143,58 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         gap: var(--boxel-sp-xs);
         margin-top: var(--boxel-sp-xs);
       }
-      .default-card-template.edit > .notes-footer {
-        background-color: var(--muted, var(--boxel-100));
+      .default-card-template--inner.edit > .notes-footer {
+        background-color: var(--muted);
+      }
+      /* keep field labels beside their inputs, wrapping the label above the
+         input only when the field's content area gets too narrow */
+      :deep(.boxel-field.horizontal:not(.theme-field)) {
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: var(--boxel-sp-xs);
+        container-name: horizontal-field;
+        container-type: inline-size;
+      }
+      :deep(.boxel-field.horizontal:not(.theme-field) > .label-container) {
+        flex: 0 0 25%;
+        min-width: 8rem;
+      }
+      :deep(.boxel-field.horizontal:not(.theme-field) > .content) {
+        flex: 1 1 14rem;
+        min-width: 0;
+      }
+      /* isolated fields render text rather than form controls: align the
+         label with the top of the content instead of an input's first line */
+      .default-card-template.isolated
+        :deep(.boxel-field.horizontal:not(.theme-field) > .label-container) {
+        padding-top: 0;
+      }
+      .default-card-template.isolated
+        :deep(.boxel-field.horizontal:not(.theme-field) > .content) {
+        --boxel-outline-width: 0;
+        align-self: start;
+      }
+      /* below the label min-width (8rem) plus the content flex-basis (14rem)
+         the label wraps above the input: give it the full line so its text
+         doesn't wrap inside the label column, and drop the padding that
+         aligns it with the input's first line */
+      @container horizontal-field (width < 22rem) {
+        :deep(.boxel-field.horizontal:not(.theme-field) > .label-container) {
+          flex-basis: 100%;
+          padding-top: 0;
+        }
+      }
+      @container default-template (width < 425px) {
+        .default-card-template--inner {
+          --boxel-default-template-padding: var(--boxel-sp);
+        }
+        :deep(.boxel-field.horizontal:not(.theme-field)) {
+          min-height: unset;
+        }
       }
       /* this aligns edit fields with containsMany, linksTo, and linksToMany fields */
-      .default-card-template.edit
+      .default-card-template--inner.edit
+        > :is(.own-display-fields, .notes-footer)
         > :deep(
           .boxel-field
             > .content
@@ -152,7 +204,8 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         ) {
         padding-right: var(--boxel-icon-lg);
       }
-      .default-card-template.edit
+      .default-card-template--inner.edit
+        > :is(.own-display-fields, .notes-footer)
         > :deep(
           .boxel-field
             > .content
@@ -161,7 +214,9 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         padding-left: var(--boxel-icon-lg);
       }
       /* Add padding for readonly fields */
-      .default-card-template.edit > :deep(.boxel-field > .content .read-only) {
+      .default-card-template--inner.edit
+        > :is(.own-display-fields, .notes-footer)
+        > :deep(.boxel-field > .content .read-only) {
         padding-left: var(--boxel-icon-lg);
         padding-right: var(--boxel-icon-lg);
       }
diff --git a/packages/base/realm-config.gts b/packages/base/realm-config.gts
index 7fa1b99313..ea3013c225 100644
--- a/packages/base/realm-config.gts
+++ b/packages/base/realm-config.gts
@@ -374,30 +374,29 @@ class RealmConfigEdit extends Component<typeof RealmConfig> {
     </div>
     <style scoped>
       .realm-config-edit {
-        --hr-color: rgba(0 0 0 / 10%);
+        --realm-config-padding: var(--boxel-sp-xl);
+        --realm-config-hr-color: rgba(0 0 0 / 10%);
         display: grid;
       }
       .card-info-header {
         --boxel-header-min-height: 9.375rem;
-        --boxel-header-padding: var(--boxel-sp-xxl) var(--boxel-sp-xl)
-          var(--boxel-sp-xl);
+        --boxel-header-padding: var(--realm-config-padding);
         --boxel-header-gap: var(--boxel-sp-lg);
-        --boxel-header-border-color: var(--hr-color);
-        align-items: flex-start;
-        background-color: var(--muted, var(--boxel-100));
+        --boxel-header-border-color: var(--realm-config-hr-color);
+        background-color: var(--muted);
       }
       .own-display-fields {
         display: grid;
         gap: var(--boxel-sp-lg);
-        padding: var(--boxel-sp-xl);
-        background-color: var(--background, var(--boxel-light));
+        padding: var(--realm-config-padding);
+        background-color: var(--background);
       }
       .own-display-fields + .notes-footer {
-        border-top: 1px solid var(--hr-color);
+        border-top: 1px solid var(--realm-config-hr-color);
       }
       .notes-footer {
-        padding: var(--boxel-sp-xl);
-        background-color: var(--muted, var(--boxel-100));
+        padding: var(--realm-config-padding);
+        background-color: var(--muted);
       }
       .warning {
         background: #fef3c7;