bandolier-template/static/blockstart.css

:root {
  --color-border: hsl(0, 0%, 50%);
  --border-radius: 5px;
  --text: 0;
  --value-scale: 12%;
}

blockstart {
  background-color: #fff;
  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0px;
  margin: 0px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
}

blockstart block > content {
  display: flex;
  flex-direction: column;
}

blockstart a {
  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
}

blockstart block {
  --spacing: space-evenly;
  --value: 9;
  --w: unset;
  --h: unset;
  --pad: unset;


  display: flex;
  background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale)));
  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
  justify-content: var(--spacing);
  flex-direction: column;
  width: var(--w);
  min-width: var(--w);
  max-width: var(--w);
  height: var(--h);
  min-height: var(--h);
  max-height: var(--h);
  padding: var(--pad);
}

blockstart block > * {
  --spacing: flex-start;
  --value: 9;
  --w: unset;
  --h: unset;
  --pad: unset;

  background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale)));
  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
  display: flex;
  flex: 1 1 auto;
  justify-content: var(--spacing);
  align-self: stretch;
  flex-direction: column;
  width: var(--w);
  min-width: var(--w);
  max-width: var(--w);
  height: var(--h);
  min-height: var(--h);
  max-height: var(--h);
  padding: var(--pad);
}

blockstart stack {
  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "cover";
}

blockstart stack > * {
  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
  width: 100%;
  height: 100%;
  position: relative;
  grid-area: cover;
}

blockstart stack > .top {
  z-index: 10;
}

blockstart .wide {
  width: 100%;
}

blockstart .no-flex {
  display: block;
  flex: unset;
  flex-direction: unset;
  align-self: unset;
}

blockstart .center {
  justify-content: center;
  align-items: center;
  align-self: center;
}

blockstart .center-text > * {
  text-align: center;
}

blockstart .center-self {
  align-self: center;
}

blockstart .vertical {
  flex-direction: column;
}

blockstart .horizontal {
  flex-direction: row;
}

blockstart grid {
  --cols: 1fr 1fr;
  --rows: auto;
  --gap: 0.5rem;

  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
}


blockstart hr {
  --height: 1rem;

  min-height: var(--height);
  visibility: hidden;
}

blockstart hr.huge {
  --height: 3rem;
}

blockstart shape {
  --w: unset;
  --h: unset;
  --value: 2;
  --text: 9;
  --pad: 1rem;

  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
  background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale)));
  display: flex;
  width: var(--w);
  min-width: var(--w);
  max-width: var(--w);
  height: var(--h);
  min-height: var(--h);
  max-height: var(--h);
  text-align: center;
  justify-content: center;
  align-items: center;
  align-self: center;
  padding: pad;
}

blockstart .debug {
  border: 1px solid red;
}

blockstart .debug > * {
  border: 1px solid blue;
}

blockstart .border {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

blockstart .compact {
  justify-content: flex-start;
}

blockstart .compact > * {
  flex: unset;
}