.panel {
  --op-panel-width: 30rem;
  --op-transition-panel: left 150ms ease-in;

  left: calc(-1 * var(--op-panel-width));
  top: 10vh;
  height: 80%;
  scrollbar-width: none;
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-2x-large);

  @media only screen and (max-width: 712px) {
    --op-panel-width: 98vw;
    height: 98vh;
    top: 1vh;
  }
}

.panel--active {
  left: var(--op-space-small);
  @media only screen and (max-width: 712px) {
    left: 1vw;
  }
}

#panel-header {
  h2 { margin: 0; }
}

#panel-header, #panel-content, #panel-footer {
  padding: var(--op-space-small);
}