@mixin abstract-both-sides() {
  --unitone--gap: var(--unitone--global--gap);
  --unitone--column-gap: var(--unitone--gap);
  --unitone--row-gap: var(--unitone--gap);
  --unitone--align-items: start;
  --unitone--content-width: fit-content;
  --unitone--content-max-width: 100%;

  display: flex;
  column-gap: var(--unitone--column-gap);
  row-gap: var(--unitone--row-gap);
  flex-wrap: wrap;
  align-items: var(--unitone--align-items);
  justify-content: space-between;

  > * {
    --unitone--max-width: var(--unitone--content-max-width);
    --unitone--flex-basis: var(--unitone--content-width);

    flex-basis: var(--unitone--flex-basis);
    flex-grow: 0;
    max-width: min(100%, var(--unitone--max-width));
    min-width: 0;
  }
}

@mixin both-sides() {
  [data-unitone-layout~="both-sides"] {
    @include abstract-both-sides();
  }
}