$card-array: #{$prefix}-card-array;
$wrapper: #{$card-array}__wrapper;
$box: #{$card-array}__box;

.#{$wrapper} {
  padding: space(xs);
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;


  @for $i from 1 through 4 {
    &--cols-lg-#{$i} { 
      .#{$box} {
        $width: 100 / #{$i};
        width: calc(#{$width}%  - (#{space(s)} * 2));
      }
    }
  }

  @media (max-width: 1024px) {
    @for $i from 1 through 4 {
      &--cols-md-#{$i} { 
        .#{$box} {
          $width: 100 / #{$i};
          width: calc(#{$width}%  - (#{space(s)} * 2));
        }
      }
    }
  }
  @media (max-width: 800px) {
    @for $i from 1 through 4 {
      &--cols-sm-#{$i} { 
        .#{$box} {
          $width: 100 / #{$i};
          width: calc(#{$width}%  - (#{space(s)} * 2));
        }
      }
    }
  }
}

.#{$box} {
  margin: space(s);
  width: calc(33.33% - (#{space(s)} * 2));
  @include box-shadow(depth(100));
  background: color(neutral, 0);
  padding: space(xs);
}