.cards {

  &.one {
    grid-template-columns: 1fr;
  }

  &.two {
    grid-template-columns: repeat(2, 1fr);
  }

  &.three {
    grid-template-columns: repeat(3, 1fr);
  }

  &.four {
    grid-template-columns: repeat(4, 1fr);
  }

  &.five {
    grid-template-columns: repeat(5, 1fr);
  }

  &.six {
    grid-template-columns: repeat(6, 1fr);
  }

  &.seven {
    grid-template-columns: repeat(7, 1fr);
  }

  &.eight {
    grid-template-columns: repeat(8, 1fr);
  }

  ::slotted(*) {
    --card-width: none;
  }

}