:root {
  --gallery-gap: #{$spacer};
  --gallery-columns: 1;
}

.ce-gallery {

  display: flex;
  flex-wrap: wrap;
  gap: var(--gallery-gap);

  //
  // Gallery Item Sizes
  // --------------------------------------------------
  &[data-ce-columns='1'] {
    --gallery-columns: 1;
  }

  &[data-ce-columns='2'] {
    --gallery-columns: 2;
  }

  &[data-ce-columns='3'] {
    --gallery-columns: 3;
  }

  &[data-ce-columns='4'] {
    --gallery-columns: 2;
    @include media-breakpoint-up('sm') {
      --gallery-columns: 4;
    }
  }

  &[data-ce-columns='5'] {
    --gallery-columns: 2;
    @include media-breakpoint-up('sm') {
      --gallery-columns: 3;
    }
    @include media-breakpoint-up('md') {
      --gallery-columns: 5;
    }
  }

  &[data-ce-columns='6'] {
    --gallery-columns: 2;
    @include media-breakpoint-up('sm') {
      --gallery-columns: 3;
    }
    @include media-breakpoint-up('md') {
      --gallery-columns: 6;
    }
  }
}


.ce-gallery--item {
  width: calc((100% / var(--gallery-columns)) - (var(--gallery-gap) * (var(--gallery-columns) - 1)) / var(--gallery-columns));
}



