$widget-row-spacing-full-width: 0 !default;
$widget-column-spacing-tablet-full-width: 0 !default;
$widget-row-spacing-tablet-full-width: 0 !default;
$widget-column-spacing-laptop-full-width: 0 !default;
$widget-row-spacing-laptop-full-width: 0 !default;

.ca-widget-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: $widget-row-spacing $widget-column-spacing;

  &--outer {
    &:not(:first-child) {
      margin: $widget-container-spacing auto 0;
    }

    @include bp(tablet) {
      @if $widget-container-spacing-tablet != $widget-container-spacing {
        &:not(:first-child) {
          margin: $widget-container-spacing-tablet auto 0;
        }
      }
    }
    
    @include bp(laptop) {
      @if $widget-container-spacing-laptop != $widget-container-spacing-tablet {
        &:not(:first-child) {
          margin: $widget-container-spacing-laptop auto 0;
        }
      }
    }
  }

  @include bp(tablet) {
    &--half {
      grid-template-columns: repeat(2, 1fr);
    }

    &--third {
      grid-template-columns: repeat(3, 1fr);
    }
    
    &--quarter {
      grid-template-columns: repeat(4, 1fr);
    }

    @if $widget-column-spacing-tablet != $widget-column-spacing {
      column-gap: $widget-column-spacing-tablet;
    }
    
    @if $widget-row-spacing-tablet != $widget-row-spacing {
      row-gap: $widget-row-spacing-tablet;
    }
  }

  @include bp(laptop) {
    @if $widget-column-spacing-laptop != $widget-column-spacing-tablet {
      column-gap: $widget-column-spacing-laptop;
    }
  
    @if $widget-row-spacing-laptop != $widget-row-spacing-tablet {
      row-gap: $widget-row-spacing-laptop;
    }
  }
  
  &--design-full-width {
    row-gap: $widget-row-spacing-full-width;

    @include bp(tablet) {
      gap: $widget-row-spacing-tablet-full-width $widget-column-spacing-tablet-full-width;
    }
  
    @include bp(laptop) {
      gap: $widget-row-spacing-laptop-full-width $widget-column-spacing-laptop-full-width;
    }
  }
}