.method-loop > div {
  min-height: 232px;
}

.phase-icon {
  position: relative;
  width: 70px;
  height: 64px;
  margin: 0 0 28px;
}

.phase-icon i,
.phase-icon em {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.icon-frame i { width: 18px; height: 18px; border-style: solid; }
.icon-frame i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.icon-frame i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.icon-frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.icon-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.icon-frame em { width: 12px; height: 12px; border: 1px solid; border-radius: 50%; left: 29px; top: 26px; }

.icon-context i { width: 52px; height: 30px; border: 1px solid; background: var(--paper); transform: skewY(-8deg); }
.icon-context i:nth-child(1) { left: 2px; top: 5px; }
.icon-context i:nth-child(2) { left: 9px; top: 16px; }
.icon-context i:nth-child(3) { left: 16px; top: 27px; }

.icon-expand i:nth-child(1) { width: 1px; height: 48px; background: currentColor; left: 34px; top: 7px; }
.icon-expand i:nth-child(2),
.icon-expand i:nth-child(3),
.icon-expand i:nth-child(4) { width: 22px; height: 22px; border: 1px solid; border-radius: 50%; background: var(--paper); }
.icon-expand i:nth-child(2) { left: 24px; top: 0; }
.icon-expand i:nth-child(3) { left: 4px; bottom: 0; }
.icon-expand i:nth-child(4) { right: 4px; bottom: 0; }

.icon-materialize i:nth-child(1) { width: 54px; height: 42px; border: 1px solid; left: 0; top: 3px; }
.icon-materialize i:nth-child(2) { width: 42px; height: 34px; border: 1px solid; background: var(--paper); right: 0; bottom: 0; }
.icon-materialize em { width: 18px; height: 3px; background: currentColor; right: 12px; bottom: 13px; }

.icon-challenge i:nth-child(1) { width: 45px; height: 45px; border: 1px solid; border-radius: 50%; left: 4px; top: 2px; }
.icon-challenge i:nth-child(2) { width: 24px; height: 1px; background: currentColor; transform: rotate(45deg); right: 2px; bottom: 9px; }
.icon-challenge em { width: 15px; height: 15px; border-width: 0 1px 1px 0; border-style: solid; transform: rotate(45deg); left: 20px; top: 15px; }

.icon-decide i:nth-child(1),
.icon-decide i:nth-child(2) { width: 24px; height: 45px; border: 1px solid; top: 3px; }
.icon-decide i:nth-child(1) { left: 3px; }
.icon-decide i:nth-child(2) { right: 3px; }
.icon-decide em { width: 26px; height: 13px; border-width: 0 0 2px 2px; border-style: solid; transform: rotate(-45deg); left: 22px; top: 17px; }

.commit .phase-icon { color: #171714; }

@media (max-width: 800px) {
  .method-loop > div { min-height: 200px; }
}