.ids__space {
  height: calc(var(--ids__density) * 0.7em);

  &.S {
    height: calc(var(--ids__density) * 0.7em);
  }
  &.M {
    height: calc(var(--ids__density) * 1.4em);
  }
  &.L {
    height: calc(var(--ids__density) * 2.4em);
  }
  &.XL {
    height: calc(var(--ids__density) * 4em);
  }
}

.ids__wrapper {
  position: relative;
  width: 70%;
  margin: 0 auto;

  @media (width < 767px) {
    width: 100%;
    padding: 0 calc(var(--ids__density) * 0.6em);
  }

  &.L {
    width: 85%;

    @media (width < 767px) {
      width: 100%;
      padding: 0 calc(var(--ids__density) * 0.6em);
    }
  }
  &.XL {
    width: 100%;
    padding: 0 calc(var(--ids__density) * 0.75em);

    @media (width < 767px) {
      padding: 0 calc(var(--ids__density) * 0.6em);
    }
  }
  &.XXL {
    width: 100%;    

    @media (width < 767px) {
      padding: 0;
    }
  }



  & .ids__text-width {
    width: 85%;

    @media (width < 767px) {
      width: 100%;
    }
  }
}

.ids__sequence {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(var(--ids__density) * 0.4em);
  --gap: 0em;
  gap: var(--gap);

  &.gap-L {
    --gap: 1.5em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  &.gap-M {
    --gap: 1em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  &.gap-S {
    --gap: 0.5em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  .ids__sequence-item {
    --columns: 4;
    width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));

    @media (width < 767px) {
      --columns: 2;
    }
  }

  &.XL {
    .ids__sequence-item {
      --columns: 2;

      @media (width < 767px) {
        --columns: 1;
      }
    }
  }

  &.L {
    .ids__sequence-item {
      --columns: 3;

      @media (width < 767px) {
        --columns: 2;
      }
    }
  }

  &.S {
    .ids__sequence-item {
      --columns: 6;

      @media (width < 767px) {
        --columns: 3;
      }
    }
  }
}