properties {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: var(--grid-spacing-horizontal);
  grid-row-gap: var(--grid-spacing-vertical);
}

property.xsmall,
property.small {
  grid-column: span 1;
}

property.medium {
  grid-column: span 2;
}

property.long {
  grid-column: span 4;
}

properties.half property.xsmall,
properties.half property.small {
  grid-column: span 2;
}

properties.half property.medium {
  grid-column: span 4;
}

/* Mobile */
@media (max-width: 767px) {
  property.xsmall,
  property.small {
    grid-column: span 2;
  }
  property.medium {
    grid-column: span 4;
  }
}

property key {
  display: block;
  width: 100%;
  color: #888;
}

property value {
  display: block;
  width: 100%;
  font-size: 1.5rem;
  margin-bottom: calc(var(--pico-typography-spacing-vertical) / 2);
}

property i {
  font-size: 1rem;
}