@use './breakpoints' as *;
@use './columns' as *;

.cbp-row {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;
  height: fit-content;
}

@include cbp-small-grid {
  .cbp-grid-container {
    margin: 0 12px;
  }

  .cbp-grid-col-auto {
    flex: 1 !important;
    margin-left: 8px !important;
    margin-right: 8px !important;    
  }

  .cbp-grid-col-full {
    flex: 0 0 calc(100% - 16px);
    margin-left: 8px !important;
    margin-right: 8px !important; 
  }

  @include grid-cols(4, 8, 'sm');
  @include grid-offset(4, 8, 'sm');
}

@include cbp-medium-grid {
  
  .cbp-grid-container {
    margin: 0 20px;
  }

  .cbp-grid-col-auto {
    flex: 1 !important;
    margin-left: 16px !important;
    margin-right: 16px !important;    
  }  

  .cbp-grid-col-full {
    flex: 0 0 calc(100% - 32px);
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  @include grid-cols(8, 16, 'md');
  @include grid-offset(8, 16, 'md');
}

@include cbp-large-grid {

  .cbp-grid-container {
    margin: 0 20px;
  }

  .cbp-grid-col-auto {
    flex: 1 !important;
    margin-left: 16px !important;
    margin-right: 16px !important;    
  }

  .cbp-grid-col-full {
    flex: 0 0 calc(100% - 32px);
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  
  @include grid-cols(12, 16, 'lg');
  @include grid-offset(12, 16, 'lg');  
}

@include cbp-extra-large-grid {

  .cbp-grid-container {
    margin: 0 28px;
  }

  .cbp-grid-col-auto {
    flex: 1 !important;
    margin-left: 16px !important;
    margin-right: 16px !important;    
  }

  .cbp-grid-col-full {
    flex: 0 0 calc(100% - 32px);
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  @include grid-cols(12, 16, 'xl');
  @include grid-offset(12, 16, 'xl');
}