.header-field {
  width: 100%;

  > .details-wrapper {
    border: 1px solid #999;
    margin-bottom: 1rem;
    padding: 1rem;

    fieldset:not(.fieldgroup) {
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  &__text-group {
    width: 100%;

    .fieldset-wrapper {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 20px;

      select {
        min-width: 100%;
      }
    }

    [class*="subtitle"] {
      grid-column: span 2;
    }
  }

  &__options-group {
    width: 100%;

    > .fieldset-wrapper {
      display: grid;
      gap: 20px;
      grid-template-columns: 1fr 1fr;

      > * {
        margin-bottom: 0;
      }
    }

    &-styles .form-checkboxes {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
  }
}
