:root {
  --step-hue: 200;
  --step-saturation: 100%;
  --step-lightness: 12%;
}

/* Dynamically generate other colors */
:root {
  --step-color1: hsl(var(--step-hue), var(--step-saturation), var(--step-lightness));
  --step-color2: hsl(var(--step-hue), calc(var(--step-saturation) + 10%), calc(var(--step-lightness) + 10%));
  --step-color3: hsl(var(--step-hue), calc(var(--step-saturation) + 15%), calc(var(--step-lightness) + 15%));
  --step-color4: hsl(var(--step-hue), calc(var(--step-saturation) + 20%), calc(var(--step-lightness) + 20%));
  --step-color5: hsl(var(--step-hue), calc(var(--step-saturation) + 25%), calc(var(--step-lightness) + 25%));
}

.step__color--1 {
  background-color: var(--step-color1);
}

.step__color--2 {
  background-color: var(--step-color2);
}

.step__color--3 {
  background-color: var(--step-color3);
}

.step__color--4 {
  background-color: var(--step-color4);
}

.step__color--5 {
  background-color: var(--step-color5);
}

.step__block {
  display      : flex;
  margin-bottom: 1em;
}

.block__left {
  align-items    : center;
  color          : white;
  display        : flex;
  flex-direction : column;
  font-size      : 0.7em;
  font-weight    : bolder;
  height         : 1.5em;
  justify-content: center;
  margin-right   : 2em;
  padding        : 2.4em;
  text-transform : uppercase;
  width          : 1.5em;
}

.block__left--large {
  font-size: 1.5rem;
}

.block__right {
  align-items    : center;
  color          : white;
  display        : flex;
  justify-content: space-between;
  padding        : 2em;
  width          : 100%;
}

.block--shadow {
  box-shadow: 0.3em 0.3em 0.3em grey;
}

.block__icon {
  align-items    : end;
  display        : flex;
  flex-direction : column;
  height         : 100%;
  justify-content: space-between;
  margin         : 0 2em;
  position       : relative;
}

.block__arrow {
  height      : 1em;
  margin-left : -1.9em;
  margin-right: 1em;
  margin-top  : 1.7em;
  transform   : rotate(45deg);
  width       : 1em;
}

.block__check {
  color   : yellowgreen;
  position: absolute;
}

.block__content {
  width: 100%;
}

.block__content--label {
  font-size  : 1.3em;
  font-weight: bold;
}

.show-collapse {
  align-items  : center;
  display      : flex;
  margin-bottom: -1em;
  margin-right : -1.8em;
  margin-top   : 1em;
}