@mixin list() { ... }@mixin list() { 
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
 }

@mixin detail() { ... }@mixin detail() { 
  padding-left: spacing.get(s2);
  margin-left: spacing.get(s2);
  flex: 0 1 calc(33.33% - #{spacing.get(s2)});
  box-sizing: border-box;
  border-left: unit.rem(1px) solid color.get('ui-bg', '02');

  /// when under 287px all details should be displayed in rows
  @container kib-profile-card (max-width: #{settings.$card-details-condensed-max-width}) {
    flex-basis: 100%;
    padding: 0;
    margin: 0;
    border: none;
    margin-top: spacing.get(s3);
  }
 }

@mixin first-detail() { ... }@mixin first-detail() { 
  margin-left: 0;
  padding-left: 0;
  border: none;
 }

@mixin stacked-detail-airy() { ... }@mixin stacked-detail-airy() { 
  margin-top: spacing.get(s4);

  @container kib-profile-card (max-width: #{settings.$card-condensed-max-width}) {
    margin-top: spacing.get(s3);
  }
 }

@mixin stacked-detail() { ... }@mixin stacked-detail() { 
  @include first-detail;

  margin-top: spacing.get(s3);
  flex-basis: 100%;

  #{$parent}--airy & {
    @include stacked-detail-airy;
  }
 }