.list {
  --columns: 1;
  --gap: 1rem;
  --reference-width: min(var(--reference-max-width, 100cqw), var(--full-width-content-width, 100cqw));

  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap);
  justify-content: space-evenly;
}

.scroller {
  flex-wrap: nowrap;
  max-width: calc(var(--column-max-width) * var(--columns) + var(--gap) * (var(--columns) - 1) + 2 * var(--scroller-padding-inline));
}

.linkAlignment-left {
  justify-content: flex-start;
}

.linkAlignment-right {
  justify-content: flex-end;
}

.linkAlignment-center {
  justify-content: center;
}

.list > * {
  margin: 2% 0;
  width: calc((var(--reference-width) - var(--gap) * (var(--columns) - 1)) / var(--columns));
  max-width: var(--column-max-width);
}

.scroller > * {
  margin: 0.5rem 0;
  flex-shrink: 0;
}

.linkWidth-full-xs {
  --reference-max-width: var(--layout-inline-content-max-width);
}

.linkWidth-full-s {
  --reference-max-width: var(--layout-inline-content-max-width);
}

.linkWidth-full-m {
  --reference-max-width: var(--layout-inline-lg-content-max-width);
}

.linkWidth-full-l {
  --reference-max-width: var(--layout-inline-content-max-width);
}

.linkWidth-full-xl {
  --reference-max-width: var(--layout-inline-lg-content-max-width);
}

.linkWidth-full-xxl {
  --reference-max-width: var(--layout-inline-xl-content-max-width);
}

.list:where(:not(.width-full)) {
  --column-max-width: calc((var(--content-max-width) - var(--gap) * (var(--max-columns) - 1)) / var(--max-columns));
}

.width-lg.layout-center.linkWidth-l,
.width-xl.linkWidth-xl {
  --max-columns: 2;
}

.width-xl.linkWidth-l {
  --max-columns: 3;
}

.linkWidth-s {
  --column-max-width: 240px;
}

@container (min-width: 315px) {
  .linkWidth-xs {
    --columns: 2
  }

  .linkWidth-s {
    --columns: var(--link-width-s-phone-columns, 2)
  }
}

@container (min-width: 375px) {
  .linkWidth-full-xs {
    --columns: 2
  }

  .linkWidth-full-s {
    --columns: var(--link-width-s-phone-columns, 2)
  }
}

@container (min-width: 400px) {
  .linkWidth-s {
    --columns: 2;
  }
}

@container (min-width: 475px) {
  .linkWidth-full-s {
    --columns: 2;
  }
}

@container (min-width: 500px) {
  .list {
    --gap: 1.5rem;
  }

  .linkWidth-xs,
  .linkWidth-full-xs {
    --gap: 1rem;
  }

  .linkWidth-xs {
    --columns: 3;
  }
}

@container (min-width: 595px) {
  .linkWidth-full-xs {
    --columns: 3;
  }
}

@container (max-width: 699px) {
  .linkWidth-m {
    --column-max-width: 300px;
  }
}

@container (min-width: 700px) {
  .list {
    --gap: 2rem;
  }

  .linkWidth-xs,
  .linkWidth-full-xs {
    --gap: 1rem;
  }

  .linkWidth-xs {
    --columns: 4;
  }

  .linkWidth-s {
    --columns: 3;
  }

  .linkWidth-m {
    --columns: 2;
  }

  .linkWidth-full-m {
    --columns: 2;
  }
}

@container (min-width: 950px) {
  .linkWidth-xs {
    --columns: 5;
  }

  .linkWidth-s {
    --columns: 4;
  }

  .linkWidth-m {
    --columns: 3;
  }

  .linkWidth-l {
    --columns: 2;
  }
}

@container (min-width: 1000px) {
  .linkWidth-xs {
    --columns: 6;
  }

  .linkWidth-s {
    --columns: 5;
  }

  .linkWidth-m {
    --columns: 4;
  }

  .linkWidth-l {
    --columns: 3;
  }

  .linkWidth-xl {
    --columns: 2;
  }
}
