.MYUI-CardGrid--s,
.MYUI-CardGrid--m {
  display: flex;
  position: relative;
  display: -webkit-box;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.MYUI-CardGrid {
  box-sizing: border-box;
  padding: var(--PADDING_bottom_or_top) var(--PADDING_left_or_right) var(--PADDING_bottom_or_top) var(--PADDING_left_or_right);
}


.MYUI-CardGrid--spaced {
  padding: var(--padding_default);
}

.MYUI-CardGrid .MYUI-Card {
  margin-right: var(--padding_default);
}

.MYUI-CardGrid--l .MYUI-Card {
  width: 100%;
  margin-right: 0;
}

.MYUI-CardGrid--l .MYUI-Card:not(:first-child) {
  margin-top: var(--padding_default);
}

.MYUI-CardGrid--m .MYUI-Card {
  width: calc((100% - var(--padding_default)) / 2);
}

.MYUI-CardGrid--m .MYUI-Card:nth-child(n + 3) {
  margin-top: var(--padding_default);
}

.MYUI-CardGrid--m .MYUI-Card:nth-child(2n) {
  margin-right: 0;
}

.MYUI-Card .MYUI-ButtonTouch--schildren {
  height: inherit;
}

.MYUI-CardGrid--s .MYUI-Card {
  width: calc((100% - var(--padding_default) * 3) / 3);
}

.MYUI-CardGrid--s .MYUI-Card:nth-child(n + 4) {
  margin-top: var(--padding_default);
}

.MYUI-CardGrid--s .MYUI-Card:nth-child(3n) {
  margin-right: 0;
}

.MYUI-CardGrid--sizeX-compact {
  padding-left: var(--padding_default);
  padding-right: var(--padding_default);
}

.MYUI-CardGrid+.MYUI-CardGrid {
  margin-top: var(--padding_default);
}