@use 'media-query' as *;

@mixin grid {
  display: grid;
  --ds-grid-gap: var(--ds-spacing-dynamic-xs);
  gap: var(--ds-grid-gap);
  min-width: 320px;
  grid-template-columns:
    [full-start extended-start] var(--ds-internal-grid-safe-zone)
    [main-start narrow-left-start narrow-center-start] repeat(8, minmax(0, 1fr))
    [narrow-center-end narrow-left-end main-end] var(
      --ds-internal-grid-safe-zone
    )
    [extended-end full-end];
  
  --ds-internal-grid-safe-zone: 8px;
  --ds-grid-span-one-half: span 8;
  --ds-grid-span-one-third: span 8;
  --ds-grid-span-two-thirds: span 8;
  --ds-grid-span-one-quarter: span 4;

  @include media-query-min('m') {
    grid-template-columns:
      [full-start extended-start] var(--ds-internal-grid-safe-zone)
      [main-start narrow-left-start] repeat(2, minmax(0, 1fr))
      [narrow-center-start] repeat(6, minmax(0, 1fr))
      [narrow-left-end]
      repeat(2, minmax(0, 1fr))
      [narrow-center-end]
      repeat(2, minmax(0, 1fr))
      [main-end] var(--ds-internal-grid-safe-zone)
      [extended-end full-end];
    
    --ds-internal-grid-safe-zone: 12px;
    --ds-grid-span-one-half: span 6;
    --ds-grid-span-one-third: span 6;
    --ds-grid-span-two-thirds: span 6;
    --ds-grid-span-one-quarter: span 6;
  }

  @include media-query-min('l') {
    grid-template-columns:
      [full-start extended-start] var(--ds-internal-grid-safe-zone)
      [main-start narrow-left-start] repeat(3, minmax(0, 1fr))
      [narrow-center-start] repeat(3, minmax(0, 1fr))
      [narrow-left-end] repeat(3, minmax(0, 1fr))
      [narrow-center-end] repeat(3, minmax(0, 1fr))
      [main-end] var(--ds-internal-grid-safe-zone)
      [extended-end full-end];
    
    --ds-internal-grid-safe-zone: 26px;
    --ds-grid-span-one-half: span 6;
    --ds-grid-span-one-third: span 4;
    --ds-grid-span-two-thirds: span 8;
    --ds-grid-span-one-quarter: span 3;
  }

  @include media-query-min('xl') {
    
    
    
    grid-template-columns:
      [full-start extended-start] auto
      [main-start narrow-left-start] repeat(3, minmax(0, calc(1408px / 16)))
      [narrow-center-start] repeat(3, minmax(0, calc(1408px / 16)))
      [narrow-left-end] repeat(3, minmax(0, calc(1408px / 16)))
      [narrow-center-end] repeat(3, minmax(0, calc(1408px / 16)))
      [main-end]auto
      [extended-end full-end];

    --ds-internal-grid-safe-zone: 0px;
  }

  @include media-query-min('xxxl') {
    
    
    
    grid-template-columns:
      [full-start] auto
      [extended-start] var(--ds-internal-grid-safe-zone)
      [main-start narrow-left-start] repeat(3, minmax(0, calc(1408px / 16)))
      [narrow-center-start] repeat(3, minmax(0, calc(1408px / 16)))
      [narrow-left-end] repeat(3, minmax(0, calc(1408px / 16)))
      [narrow-center-end] repeat(3, minmax(0, calc(1408px / 16)))
      [main-end] var(--ds-internal-grid-safe-zone)
      [extended-end]
      auto [full-end];
    
    
    --ds-internal-grid-safe-zone: 192px; 
  }
}