.root {
  display: flex;
  flex-direction: column;
  max-width: calc(80px * 8 + 20px * 8);
  row-gap: 30px;
  margin: 20px 8px;
}

.standardAttributesTitle {
  margin-bottom: -20px;
}

.nameGroup {
  display: grid;
  row-gap: 8px;
  column-gap: 16px;

  grid-template-columns: repeat(2, auto);
  grid-auto-rows: auto;
}

.twoColumnGroup {
  display: grid;
  row-gap: 4px;
  column-gap: 16px;

  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
}

.singleColumnGroup {
  display: grid;
  row-gap: 8px;

  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: min-content;
}

.addressGroup {
  display: grid;
  gap: 8px;

  grid-template:
    "street      street  street" auto
    "city        city    city" auto
    "postalCode  state   country" auto
    / 1fr 1fr 1fr;
}

.gridAreaStreet {
  grid-area: street;
}

.gridAreaCity {
  grid-area: city;
}

.gridAreaPostalCode {
  grid-area: postalCode;
}

.gridAreaState {
  grid-area: state;
}

.gridAreaCountry {
  grid-area: country;
}

.customAttributesForm {
  display: grid;
  row-gap: 30px;
  column-gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}

.customAttributeControl {
  grid-column: 1 / span 1;
}
