.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);
  }
}

.site-header {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: calc(var(--ids__density) * 0.45em)
    calc(var(--ids__density) * 0.65em);
}

.site-header .lang-switch {
  margin: 0;
}

.lang-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65em;
  margin: 0;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lang-switch__current {
  box-sizing: border-box;
  padding: 0.25em 0.5em 0.28em;
  border: 1px solid rgb(var(--ids__text-RGB));
  border-radius: 0.28em;
  color: rgb(var(--ids__text-RGB));
  line-height: 1;
}

.lang-switch .lang-switch__link {
  padding: 0.28em 0.15em;
  line-height: 1;
  text-decoration: none;
}

.ids ids-nav-item#product figure.XXS {
  margin-inline: auto;
}

.ids ids-nav-item#product figure.XXS img {
  display: block;
}

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

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

  &.L {
    width: 85%;

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

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

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

  & .ids__text-width {
    width: 85%;

    @media (width < 768px) {
      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: 2em;
    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 < 768px) {
      --columns: 2;
    }
  }

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

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

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

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

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

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

.ids__rounded {
  border-radius: var(--ids__radius);
  corner-shape: squircle;
  overflow: hidden;
}

@supports not (corner-shape: squircle) {
  .ids__rounded {
    border-radius: 0;
    border-radius: initial;
    mask:
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,1 c0,-1 0,-1 1,-1 l99,0 l0,100 l-100,0 Z"/></svg>') top left / calc(var(--ids__radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l99,0 c1,0 1,0 1,1 l0,99 l-100,0 l0,-100 Z"/></svg>') top right / calc(var(--ids__radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,99 c0,1 -0,1 -1,1 l-99,0 Z"/></svg>') bottom right / calc(var(--ids__radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,100 l-99,0 c-1,0 -1,-0 -1,-1 Z"/></svg>') bottom left / calc(var(--ids__radius) * 100) no-repeat intersect
    ;
  }
}

footer {
  padding: calc(var(--ids__density) * 1em);
}

.team-card p {
  font-size: 0.8em;
  line-height: var(--ids__density);
}

.team-avatar {
  width: min(6rem, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.team-avatar img,
.team-avatar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ids__sequence-item:has(a.module-card) {
  display: flex;
}

.ids a.module-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--ids__density) * 0.65em);
  background: rgb(var(--ids__surface-RGB));
  color: rgb(var(--ids__text-RGB));
  text-decoration: none;
  text-underline-offset: 0;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ids a.module-card:hover {
  color: rgb(var(--ids__text-RGB));
  text-decoration: none;
  background-color: rgba(var(--ids__hover-RGB), 0.1);
}

.ids a.module-card:focus-visible {
  outline: 2px solid rgb(var(--ids__link-RGB));
  outline-offset: 2px;
}

.ids a.module-card h4 {
  text-decoration: underline;
  text-decoration-color: rgb(var(--ids__code-RGB));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.module-card__body {
  flex: 1 1 auto;
  min-height: calc(var(--ids__density) * 1em * 5);
}

.module-card__body p {
  margin-bottom: calc(var(--ids__density) * 0.35em);
}

.module-card__body p:last-child {
  margin-bottom: 0;
}

.board-embed {
  width: 100%;
  height: min(85vh, 720px);
  min-height: 360px;
  overflow: hidden;
  background: rgb(var(--ids__surface-RGB));
  border: 1px solid rgba(var(--ids__text-RGB), 0.12);
}

.board-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}