#explorer {
  width: 100%;

  --cube: 4.5rem;

  #chain {
    display: flex;
    flex-direction: column-reverse;
    gap: calc(var(--cube) * 0.66);
    padding: 2rem;

    .cube {
      width: var(--cube);
      height: var(--cube);
      overflow: hidden;
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
      --face-color: var(--border-color);
      color: var(--color);

      .face {
        transform-origin: 0 0;
        position: absolute;
        width: var(--cube);
        height: var(--cube);
        padding: 0.1rem;
      }

      .right {
        background-color: oklch(from var(--face-color) calc(l - 0.05) c h);
        transform: rotate(-30deg) skewX(-30deg)
          translate(calc(var(--cube) * 1.3), calc(var(--cube) * 1.725))
          scaleY(0.864);
      }

      .top {
        background-color: oklch(from var(--face-color) calc(l + 0.05) c h);
        transform: rotate(30deg) skew(-30deg)
          translate(calc(var(--cube) * 0.99), calc(var(--cube) * -0.265))
          scaleY(0.864);
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        font-weight: 900;
        text-transform: uppercase;
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
      }

      .left {
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
        background-color: var(--face-color);
        transform: rotate(30deg) skewX(30deg)
          translate(calc(var(--cube) * 0.3), calc(var(--cube) * 0.6))
          scaleY(0.864);
      }

      .fees {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
      }
    }
  }
}