:root {
  --unit: 1rem;
  --min-viewport: 20;
  --max-viewport: 80;
}
.br-xs {
  --min: 0.2;
  --max: 0.3;
}
.br-s {
  --min: 0.35;
  --max: 0.6;
}
.br-m {
  --min: 0.6;
  --max: 1.2;
}
.br-l {
  --min: 1;
  --max: 1.7;
}
.br-xl {
  --min: 1.5;
  --max: 2.5;
}
.br-xs, .br-s, .br-m, .br-l, .br-xl {
  border-radius: calc(clamp(var(--min) * var(--unit), ((var(--min) * var(--unit)) + (var(--max) - var(--min)) * ((100vw - (var(--min-viewport) * var(--unit) )) / (var(--max-viewport) - var(--min-viewport)))), var(--max) * var(--unit))) !important;
}
.bs-xs--l {
  box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.3);
}
.bs-s--l {
  box-shadow: 0 0.35em 1.5em rgba(0, 0, 0, 0.3);
}
.bs-m--l {
  box-shadow: 0 0.75em 2em rgba(0, 0, 0, 0.3);
}
.bs-l--l {
  box-shadow: 0 0.75em 3em rgba(0, 0, 0, 0.3);
}
.bs-xl--l {
  box-shadow: 0 1em 4em rgba(0, 0, 0, 0.3);
}
.bs-xs--m {
  box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.5);
}
.bs-s--m {
  box-shadow: 0 0.35em 1.5em rgba(0, 0, 0, 0.5);
}
.bs-m--m {
  box-shadow: 0 0.75em 2em rgba(0, 0, 0, 0.5);
}
.bs-l--m {
  box-shadow: 0 0.75em 3em rgba(0, 0, 0, 0.5);
}
.bs-xl--m {
  box-shadow: 0 1em 4em rgba(0, 0, 0, 0.5);
}
.bs-xs--d {
  box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.8);
}
.bs-s--d {
  box-shadow: 0 0.35em 1.5em rgba(0, 0, 0, 0.8);
}
.bs-m--d {
  box-shadow: 0 0.75em 2em rgba(0, 0, 0, 0.8);
}
.bs-l--d {
  box-shadow: 0 0.75em 3em rgba(0, 0, 0, 0.8);
}
.bs-xl--d {
  box-shadow: 0 1em 4em rgba(0, 0, 0, 0.8);
}