@use 'media-query' as *;

$grid-main-column-start: main-start;
$grid-main-column-end: main-end;
$grid-sidebar-main-column-start: $grid-main-column-start;
$grid-sidebar-main-column-end: $grid-main-column-end;

@mixin grid-main-column {
  grid-column: $grid-main-column-start / $grid-main-column-end;
}

@mixin grid-sidebar-main-column {
  @include grid-main-column;
}


@mixin grid-first-half {
  grid-column: $grid-main-column-start / $grid-span-one-half;
}
@mixin grid-span-one-half {
  grid-column: $grid-span-one-half / $grid-main-column-end;
}

@mixin grid-sidebar-first-half {
  @include grid-first-half;
}
@mixin grid-sidebar-span-one-half {
  @include grid-span-one-half;
}


@mixin grid-first-third {
  grid-column: $grid-main-column-start / $grid-main-column-end;
  @include media-query-min('m') {
    grid-column: $grid-main-column-start / $grid-span-one-third;
  }
}
@mixin grid-span-one-third($isThirdItem: false) {
  
  grid-column: $grid-main-column-start / $grid-main-column-end;
  
  
  
  @include media-query-min('m') {
    @if $isThirdItem == true {
      grid-column: $grid-main-column-start / $grid-span-one-third;
    } @else {
      grid-column: $grid-span-one-third;
    }
  }

  
  @include media-query-min('l') {
    grid-column: $grid-span-one-third;
  }
}

@mixin grid-sidebar-first-third {
  @include grid-first-third;
}
@mixin grid-sidebar-span-one-third($isThirdItem: false) {
  @include grid-span-one-third($isThirdItem: false);
}


@mixin grid-first-two-thirds {
  grid-column: $grid-main-column-start / $grid-main-column-end;
  @include media-query-min('m') {
    grid-column: $grid-main-column-start / $grid-span-two-thirds;
  }
}
@mixin grid-span-two-thirds {
  grid-column: $grid-main-column-start / $grid-main-column-end;
  @include media-query-min('m') {
    grid-column: $grid-span-two-thirds / $grid-main-column-end;
  }
}

@mixin grid-sidebar-first-two-thirds {
  @include grid-first-two-thirds;
}
@mixin grid-sidebar-span-two-thirds {
  @include grid-span-two-thirds;
}


@mixin grid-first-quarter {
  grid-column: $grid-main-column-start / $grid-span-one-quarter;
}
@mixin grid-span-one-quarter($isThirdItem: false) {
  
  
  
  @if $isThirdItem == true {
    grid-column: $grid-main-column-start / $grid-span-one-quarter;
  } @else {
    grid-column: $grid-span-one-quarter;
  }

  
  @include media-query-min('l') {
    grid-column: $grid-span-one-quarter;
  }
}

@mixin grid-sidebar-first-quarter {
  @include grid-first-quarter;
}

@mixin grid-sidebar-span-one-quarter($isThirdItem: false) {
  
  
  
  @if $isThirdItem == true {
    grid-column: $grid-main-column-start / $grid-span-one-quarter;
  } @else {
    grid-column: $grid-span-one-quarter;
  }
  
  @include media-query-min('xl') {
    grid-column: $grid-span-one-quarter;
  }
}

$grid-span-one-half: var(--ds-grid-span-one-half);
$grid-span-one-third: var(--ds-grid-span-one-third);
$grid-span-two-thirds: var(--ds-grid-span-two-thirds);
$grid-span-one-quarter: var(--ds-grid-span-one-quarter);

$grid-sidebar-span-one-half: $grid-span-one-half;
$grid-sidebar-span-one-third: $grid-span-one-third;
$grid-sidebar-span-two-thirds: $grid-span-two-thirds;
$grid-sidebar-span-one-quarter: $grid-span-one-quarter;