.host {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.padding {
  padding-block: var(--vkui--size_base_padding_vertical--regular);
  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
}

.sizeXCompact {
  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
}

@media (max-width: 767.9px) {
  .sizeXNone {
    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
  }
}

.host + .host {
  -webkit-margin-before: calc(var(--vkui--size_cardgrid_padding_vertical--regular) * 2);
          margin-block-start: calc(var(--vkui--size_cardgrid_padding_vertical--regular) * 2);
}

/**
 * CMP:
 * Group
 */

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

:global(.vkuiInternalGroup--mode-card) .host {
  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
}

@media (min-width: 768px) {
  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
  :global(.vkuiInternalGroup--mode-none) .host {
    padding-inline: 8px;
  }
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

:global(.vkuiInternalGroup) .host:first-child {
  -webkit-margin-before: var(--vkui--size_cardgrid_padding_vertical--regular);
          margin-block-start: var(--vkui--size_cardgrid_padding_vertical--regular);
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

:global(.vkuiInternalGroup) .host:last-child {
  -webkit-margin-after: var(--vkui--size_cardgrid_padding_vertical--regular);
          margin-block-end: var(--vkui--size_cardgrid_padding_vertical--regular);
}