:root {
  --ds-layout-grid-margin-large: var(--token-size-layout-s-margin, 24px);
  --ds-layout-grid-gutter-large-horizontal: var(
    --token-size-layout-s-padding-horizontal,
    24px
  );
  --ds-layout-grid-gutter-large-vertical: var(
    --token-size-layout-s-padding-vertical,
    24px
  );
  --ds-layout-grid-column-width-large: 72px;
  --ds-layout-grid-margin-medium: var(--token-size-layout-xs-margin, 16px);
  --ds-layout-grid-gutter-medium-horizontal: var(
    --token-size-layout-xs-padding-horizontal,
    16px
  );
  --ds-layout-grid-gutter-medium-vertical: var(
    --token-size-layout-xs-padding-vertical,
    16px
  );
  --ds-layout-grid-column-width-medium: 72px;
  --ds-layout-grid-margin-small: var(--token-size-layout-xxs-margin, 16px);
  --ds-layout-grid-gutter-small-horizontal: var(
    --token-size-layout-xxs-padding-horizontal,
    16px
  );
  --ds-layout-grid-gutter-small-vertical: var(
    --token-size-layout-xxs-padding-vertical,
    16px
  );
  --ds-layout-grid-column-width-small: 72px;
}

.ds-layout-grid {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px;
  padding: var(--ds-layout-grid-margin-large);
}

@media (max-width: 641px) {
  .ds-layout-grid {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 16px;
    padding: var(--ds-layout-grid-margin-medium);
  }
}

@media (max-width: 320px) {
  .ds-layout-grid {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 16px;
    padding: var(--ds-layout-grid-margin-small);
  }
}

.ds-layout-grid__inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin: -12px -12px;
  margin: calc(var(--ds-layout-grid-gutter-large-vertical) / 2 * -1)
    calc(var(--ds-layout-grid-gutter-large-horizontal) / 2 * -1);
}

/*
          @supports (display: grid) {
            .ds-layout-grid__inner {
              display: grid;
              margin: 0;
              grid-gap: 24px;
              grid-gap: var(--ds-layout-grid-gutter-large, 24px);
              grid-template-columns: repeat(12, minmax(0, 1fr));
            }
          }
        */

@media (max-width: 641px) {
  .ds-layout-grid__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: -8px -8px;
    margin: calc(var(--ds-layout-grid-gutter-medium-vertical) / 2 * -1)
      calc(var(--ds-layout-grid-gutter-medium-horizontal) / 2 * -1);
  }

  /*
          @supports (display: grid) {
            .ds-layout-grid__inner {
              display: grid;
              margin: 0;
              grid-gap: 16px;
              grid-gap: var(--ds-layout-grid-gutter-medium, 16px);
              grid-template-columns: repeat(8, minmax(0, 1fr));
            }
          }
        */
}
@media (max-width: 320px) {
  .ds-layout-grid__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: -8px -8px;
    margin: calc(var(--ds-layout-grid-gutter-small-vertical) / 2 * -1)
      calc(var(--ds-layout-grid-gutter-small-horizontal) / 2 * -1);
  }

  /*
          @supports (display: grid) {
            .ds-layout-grid__inner {
              display: grid;
              margin: 0;
              grid-gap: 16px;
              grid-gap: var(--ds-layout-grid-gutter-small, 16px);
              grid-template-columns: repeat(4, minmax(0, 1fr));
            }
          }
        */
}

.ds-layout-grid__cell {
  width: calc(33.33333333333333% - 24px);
  width: calc(
    33.33333333333333% - var(--ds-layout-grid-gutter-large-horizontal)
  );
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 12px 12px;
  margin: calc(var(--ds-layout-grid-gutter-large-vertical) / 2)
    calc(var(--ds-layout-grid-gutter-large-horizontal) / 2);
}

/*
      @supports (display: grid) {
        .ds-layout-grid__cell {
          width: auto;
          grid-column-end: span 4;
        }
      }


      @supports (display: grid) {
        .ds-layout-grid__cell {
          margin: 0;
        }
      }
      */

.ds-layout-grid__cell--span-12,
.ds-layout-grid__cell--span-12-large {
  width: calc(100% - 24px);
  width: calc(100% - var(--ds-layout-grid-gutter-large-horizontal, 24px));
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-12,
        .ds-layout-grid__cell--span-12-large {
          width: auto;
          grid-column-end: span 12;
        }
      }
      */

.ds-layout-grid__cell--span-11,
.ds-layout-grid__cell--span-11-large {
  width: calc(91.66666666666666% - 24px);
  width: calc(
    91.66666666666666% - var(--ds-layout-grid-gutter-large-horizontal, 24px)
  );
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-11,
        .ds-layout-grid__cell--span-11-large {
          width: auto;
          grid-column-end: span 11;
        }
      }
      */

.ds-layout-grid__cell--span-10,
.ds-layout-grid__cell--span-10-large {
  width: calc(83.33333333333334% - 24px);
  width: calc(
    83.33333333333334% - var(--ds-layout-grid-gutter-large-horizontal, 24px)
  );
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-10,
        .ds-layout-grid__cell--span-10-large {
          width: auto;
          grid-column-end: span 10;
        }
      }
      */

.ds-layout-grid__cell--span-9,
.ds-layout-grid__cell--span-9-large {
  width: calc(75% - 24px);
  width: calc(75% - var(--ds-layout-grid-gutter-large-horizontal, 24px));
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-9,
        .ds-layout-grid__cell--span-9-large {
          width: auto;
          grid-column-end: span 9;
        }
      }
      */

.ds-layout-grid__cell--span-8,
.ds-layout-grid__cell--span-8-large {
  width: calc(66.66666666666666% - 24px);
  width: calc(
    66.66666666666666% - var(--ds-layout-grid-gutter-large-horizontal, 24px)
  );
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-8,
        .ds-layout-grid__cell--span-8-large {
          width: auto;
          grid-column-end: span 8;
        }
      }
      */

.ds-layout-grid__cell--span-7,
.ds-layout-grid__cell--span-7-large {
  width: calc(58.333333333333336% - 24px);
  width: calc(
    58.333333333333336% - var(--ds-layout-grid-gutter-large-horizontal, 24px)
  );
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-7,
        .ds-layout-grid__cell--span-7-large {
          width: auto;
          grid-column-end: span 7;
        }
      }
      */

.ds-layout-grid__cell--span-6,
.ds-layout-grid__cell--span-6-large {
  width: calc(50% - 24px);
  width: calc(50% - var(--ds-layout-grid-gutter-large-horizontal, 24px));
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-6,
        .ds-layout-grid__cell--span-6-large {
          width: auto;
          grid-column-end: span 6;
        }
      }
      */

.ds-layout-grid__cell--span-5,
.ds-layout-grid__cell--span-5-large {
  width: calc(41.66666666666667% - 24px);
  width: calc(
    41.66666666666667% - var(--ds-layout-grid-gutter-large-horizontal, 24px)
  );
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-5,
        .ds-layout-grid__cell--span-5-large {
          width: auto;
          grid-column-end: span 5;
        }
      }
      */

.ds-layout-grid__cell--span-4,
.ds-layout-grid__cell--span-4-large {
  width: calc(33.33333333333333% - 24px);
  width: calc(
    33.33333333333333% - var(--ds-layout-grid-gutter-large-horizontal, 24px)
  );
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-4,
        .ds-layout-grid__cell--span-4-large {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

.ds-layout-grid__cell--span-3,
.ds-layout-grid__cell--span-3-large {
  width: calc(25% - 24px);
  width: calc(25% - var(--ds-layout-grid-gutter-large-horizontal, 24px));
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-3,
        .ds-layout-grid__cell--span-3-large {
          width: auto;
          grid-column-end: span 3;
        }
      }
      */

.ds-layout-grid__cell--span-2,
.ds-layout-grid__cell--span-2-large {
  width: calc(16.666666666666664% - 24px);
  width: calc(
    16.666666666666664% - var(--ds-layout-grid-gutter-large-horizontal, 24px)
  );
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-2,
        .ds-layout-grid__cell--span-2-large {
          width: auto;
          grid-column-end: span 2;
        }
      }
      */

.ds-layout-grid__cell--span-1,
.ds-layout-grid__cell--span-1-large {
  width: calc(8.333333333333332% - 24px);
  width: calc(
    8.333333333333332% - var(--ds-layout-grid-gutter-large-horizontal, 24px)
  );
}

/*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-1,
        .ds-layout-grid__cell--span-1-large {
          width: auto;
          grid-column-end: span 1;
        }
      }
      */

@media (max-width: 641px) {
  .ds-layout-grid__cell {
    width: calc(50% - 16px);
    width: calc(50% - var(--ds-layout-grid-gutter-medium-horizontal));
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 8px 8px;
    margin: calc(var(--ds-layout-grid-gutter-medium-vertical) / 2)
      calc(var(--ds-layout-grid-gutter-medium-horizontal) / 2);
  }

  /*
      @supports (display: grid) {
        .ds-layout-grid__cell {
          width: auto;
          grid-column-end: span 4;
        }
      }


      @supports (display: grid) {
        .ds-layout-grid__cell {
          margin: 0;
        }
      }
      */

  .ds-layout-grid__cell--span-12,
  .ds-layout-grid__cell--span-12-medium {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-12,
        .ds-layout-grid__cell--span-12-medium {
          width: auto;
          grid-column-end: span 8;
        }
      }
      */

  .ds-layout-grid__cell--span-11,
  .ds-layout-grid__cell--span-11-medium {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-11,
        .ds-layout-grid__cell--span-11-medium {
          width: auto;
          grid-column-end: span 8;
        }
      }
      */

  .ds-layout-grid__cell--span-10,
  .ds-layout-grid__cell--span-10-medium {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-10,
        .ds-layout-grid__cell--span-10-medium {
          width: auto;
          grid-column-end: span 8;
        }
      }
      */

  .ds-layout-grid__cell--span-9,
  .ds-layout-grid__cell--span-9-medium {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-9,
        .ds-layout-grid__cell--span-9-medium {
          width: auto;
          grid-column-end: span 8;
        }
      }
      */

  .ds-layout-grid__cell--span-8,
  .ds-layout-grid__cell--span-8-medium {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-8,
        .ds-layout-grid__cell--span-8-medium {
          width: auto;
          grid-column-end: span 8;
        }
      }
      */

  .ds-layout-grid__cell--span-7,
  .ds-layout-grid__cell--span-7-medium {
    width: calc(87.5% - 16px);
    width: calc(87.5% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-7,
        .ds-layout-grid__cell--span-7-medium {
          width: auto;
          grid-column-end: span 7;
        }
      }
      */

  .ds-layout-grid__cell--span-6,
  .ds-layout-grid__cell--span-6-medium {
    width: calc(75% - 16px);
    width: calc(75% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-6,
        .ds-layout-grid__cell--span-6-medium {
          width: auto;
          grid-column-end: span 6;
        }
      }
      */

  .ds-layout-grid__cell--span-5,
  .ds-layout-grid__cell--span-5-medium {
    width: calc(62.5% - 16px);
    width: calc(62.5% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-5,
        .ds-layout-grid__cell--span-5-medium {
          width: auto;
          grid-column-end: span 5;
        }
      }
      */

  .ds-layout-grid__cell--span-4,
  .ds-layout-grid__cell--span-4-medium {
    width: calc(50% - 16px);
    width: calc(50% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-4,
        .ds-layout-grid__cell--span-4-medium {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-3,
  .ds-layout-grid__cell--span-3-medium {
    width: calc(37.5% - 16px);
    width: calc(37.5% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-3,
        .ds-layout-grid__cell--span-3-medium {
          width: auto;
          grid-column-end: span 3;
        }
      }
      */

  .ds-layout-grid__cell--span-2,
  .ds-layout-grid__cell--span-2-medium {
    width: calc(25% - 16px);
    width: calc(25% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-2,
        .ds-layout-grid__cell--span-2-medium {
          width: auto;
          grid-column-end: span 2;
        }
      }
      */

  .ds-layout-grid__cell--span-1,
  .ds-layout-grid__cell--span-1-medium {
    width: calc(12.5% - 16px);
    width: calc(12.5% - var(--ds-layout-grid-gutter-medium-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-1,
        .ds-layout-grid__cell--span-1-medium {
          width: auto;
          grid-column-end: span 1;
        }
      }
      */
}

@media (max-width: 320px) {
  .ds-layout-grid__cell {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal));
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 8px 8px;
    margin: calc(var(--ds-layout-grid-gutter-small-vertical) / 2)
      calc(var(--ds-layout-grid-gutter-small-horizontal) / 2);
  }

  /*
      @supports (display: grid) {
        .ds-layout-grid__cell {
          width: auto;
          grid-column-end: span 4;
        }
      }


      @supports (display: grid) {
        .ds-layout-grid__cell {
          margin: 0;
        }
      }
      */

  .ds-layout-grid__cell--span-12,
  .ds-layout-grid__cell--span-12-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-12,
        .ds-layout-grid__cell--span-12-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-11,
  .ds-layout-grid__cell--span-11-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-11,
        .ds-layout-grid__cell--span-11-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-10,
  .ds-layout-grid__cell--span-10-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-10,
        .ds-layout-grid__cell--span-10-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-9,
  .ds-layout-grid__cell--span-9-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-9,
        .ds-layout-grid__cell--span-9-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-8,
  .ds-layout-grid__cell--span-8-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-8,
        .ds-layout-grid__cell--span-8-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-7,
  .ds-layout-grid__cell--span-7-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-7,
        .ds-layout-grid__cell--span-7-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-6,
  .ds-layout-grid__cell--span-6-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-6,
        .ds-layout-grid__cell--span-6-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-5,
  .ds-layout-grid__cell--span-5-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-5,
        .ds-layout-grid__cell--span-5-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-4,
  .ds-layout-grid__cell--span-4-small {
    width: calc(100% - 16px);
    width: calc(100% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-4,
        .ds-layout-grid__cell--span-4-small {
          width: auto;
          grid-column-end: span 4;
        }
      }
      */

  .ds-layout-grid__cell--span-3,
  .ds-layout-grid__cell--span-3-small {
    width: calc(75% - 16px);
    width: calc(75% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-3,
        .ds-layout-grid__cell--span-3-small {
          width: auto;
          grid-column-end: span 3;
        }
      }
      */

  .ds-layout-grid__cell--span-2,
  .ds-layout-grid__cell--span-2-small {
    width: calc(50% - 16px);
    width: calc(50% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-2,
        .ds-layout-grid__cell--span-2-small {
          width: auto;
          grid-column-end: span 2;
        }
      }
      */

  .ds-layout-grid__cell--span-1,
  .ds-layout-grid__cell--span-1-small {
    width: calc(25% - 16px);
    width: calc(25% - var(--ds-layout-grid-gutter-small-horizontal, 16px));
  }

  /*

      @supports (display: grid) {
        .ds-layout-grid__cell--span-1,
        .ds-layout-grid__cell--span-1-small {
          width: auto;
          grid-column-end: span 1;
        }
      }
      */
}