webawesome/src/styles/utilities/layout.css

:is(
    [class*='wa-cluster'],
    [class*='wa-flank'],
    [class*='wa-frame'],
    [class*='wa-grid'],
    [class*='wa-stack'],
    [class*='wa-split']
  )
  > * {
  margin-block: 0;
  margin-inline: 0;
}

:where(
  [class*='wa-cluster'],
  [class*='wa-flank'],
  [class*='wa-frame'],
  [class*='wa-grid'],
  [class*='wa-stack'],
  [class*='wa-split']
) {
  gap: var(--wa-space-m);
}

/* #region Cluster */
[class*='wa-cluster'] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

:where([class*='wa-cluster']) {
  align-items: center;
}
/* #endregion */

/* #region Flank */
[class*='wa-flank'] {
  display: flex;
  flex-wrap: wrap;

  --content-percentage: initial;
  --flank-size: initial;
}

[class*='wa-flank']:not([class*='\:end']) > :first-child,
[class*='wa-flank'][class*='\:start'] > :first-child {
  flex-basis: var(--flank-size, auto);
  flex-grow: 1;
}
[class*='wa-flank']:not([class*='\:end']) > :last-child,
[class*='wa-flank'][class*='\:start'] > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--content-percentage, 50%);
}

[class*='wa-flank'][class*='\:end'] > :last-child {
  flex-basis: var(--flank-size, auto);
  flex-grow: 1;
}
[class*='wa-flank'][class*='\:end'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--content-percentage, 50%);
}

:where([class*='wa-flank']) {
  align-items: center;
}
/* #endregion */

/* #region Frame */
[class*='wa-frame'] {
  display: flex;
  aspect-ratio: 1 / 1;
  justify-content: center;
  overflow: hidden;
}

[class*='wa-frame'] > img,
[class*='wa-frame'] > video {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

[class*='wa-frame'][class*='\:square'] {
  aspect-ratio: 1 / 1;
}
[class*='wa-frame'][class*='\:landscape'] {
  aspect-ratio: 16 / 9;
}
[class*='wa-frame'][class*='\:portrait'] {
  aspect-ratio: 9 / 16;
}

:where([class*='wa-frame']) {
  align-items: center;
}
/* #endregion */

/* #region Grid */
[class*='wa-grid'] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));

  --min-column-size: initial;
}

.wa-span-grid {
  grid-column: 1 / -1;
}
/* #endregion */

/* #region Split */
[class*='wa-split'] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

[class*='wa-split'],
[class*='wa-split'][class*='\:row'] {
  flex-direction: row;
  block-size: auto;
  inline-size: 100%;
}

[class*='wa-split']:not([class*='\:column']) > :first-child {
  flex: 0 1 auto;
}

[class*='wa-split'][class*='\:column'] {
  flex-direction: column;
  block-size: auto;
  inline-size: auto;
  align-self: stretch;
}

:where([class*='wa-split']) {
  align-items: center;
}

/* #endregion */

/* #region Stack */
[class*='wa-stack'] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

:where([class*='wa-stack']) {
  align-items: stretch;
}
/* #endregion */