/* ========================================================= */
/* Components: Gridfield                                     */
/* ========================================================= */

    .sg-gridfield-demo {
      display: inline-flex;
      flex-direction: column;
      gap: var(--spacing-small);
      width: fit-content;
      padding: var(--spacing-large);
      border-radius: var(--radius-card);
      background: var(--surface-form-preview);
    }

    .sg-gridfield-row {
      display: grid;
      grid-template-columns: var(--layout-gridfield-label-column-width) minmax(0, 1fr);
      column-gap: var(--layout-gridfield-column-gap);
      align-items: center;
      width: 100%;
      max-width: var(--layout-gridfield-field-max-width);
    }

    .sg-gridfield-row .sg-label {
      min-width: 0;
      margin: 0;
      line-height: 1;
      color: var(--text-control-default);
    }

    .sg-gridfield-row .sg-interaction-element,
    .sg-gridfield-row .sg-pulldown-demo,
    .sg-gridfield-row .sg-pulldown {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    @media (max-width: 48rem) {
      .sg-gridfield-demo {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .sg-gridfield-row {
        grid-template-columns: 1fr;
        row-gap: var(--layout-gridfield-row-gap);
        align-items: start;
        max-width: 100%;
      }
    }