.panel {
  --base-space: 1.6rem;
  --panel-max-width: 68em;
  --panel-padding-inline: var(--base-space);
  --panel-margin-inline-negative: calc(var(--panel-padding-inline) * -1);
  --panel-header-offset: calc(var(--base-space) / 2);
  --recordable-block-padding: calc(var(--base-space) * 2);
  --recordable-inline-padding: calc(var(--base-space) * 4);
  inline-size: 100%;
  max-inline-size: var(--panel-max-width);
  margin-inline: auto;
  padding-inline: var(--panel-padding-inline);
  padding-block-end: calc(var(--base-space) * 2);
}

.panel--perma,
.panel--project {
  min-block-size: calc(100vh - var(--nav-height));
  background-color: var(--color-canvas);
  position: relative;
}

.panel.panel--project {
  --panel-padding-inline: calc(var(--base-space) * 2);
}

@media screen and (min-width: 768px) {
  .panel--perma,
  .panel--project {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-warm-lg);
    inline-size: 90%;
  }
}

.panel__header {
  --panel-header-spacer: calc(var(--base-space) * 2);
  padding-block-start: var(--panel-header-spacer);
}

.panel__description {
  font-weight: 400;
}