.panel {
    inline-size: var(--panel-size, 60ch);
    max-inline-size: 100%;


    @media (min-width: 640px) {
      --panel-size: 100%;
      border-radius: var(--radius-xl);
      border-color: oklch(0.93 0 0);
      border-style: var(--tw-border-style);
      border-width: 2px;
      margin-top: 28vh;
    }
  }

  .panel--wide {
    --panel-size: 60ch;
  }

  .panel--centered {
    --panel-border-size: 0;
    --panel-size: 100%;

    @media (min-width: 640px) {
      --panel-size: 40ch;
    }

  }

  .panel input:focus-visible,
  .panel textarea:focus-visible,
  .panel button:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
  }

  .panel input:focus-visible.border-b-2 {
    border-bottom: 2px solid var(--color-base-content);
    outline: none;
  }