<div class="cube">
  <div class="side left">S</div>
  <div class="side front">S</div>
  <div class="side top">C</div> 
</div>

@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(design.system);

@layer demo {
  .cube {
    --size: 20vmin;
    --outset-size: calc(var(--size) * 1.1);
    
    inline-size: var(--outset-size);
    block-size: var(--outset-size);
    
    display: grid;
    grid: [stack] / [stack];
    
    transform-style: preserve-3d;
    transform: rotateX(235deg) rotateZ(-135deg);
    margin-block-start: 70%;
    box-shadow: 0 0 20vmin var(--link);
  }

  .side {
    grid-area: stack;
    display: grid;
    place-content: center;
    width: var(--outset-size);
    overflow: hidden;
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-4);
    
    font-weight: var(--font-weight-9);
    font-size: calc(var(--size) * 1.4);
  }

  .top {
    transform: rotateZ(180deg) translateZ(calc(var(--size) * -1));
    color: var(--link);
  }

  .front {
    transform: rotateZ(180deg) rotateX(90deg) translateX(-2vmin) translateY(-4vmin) scaleY(.8);
    transform-origin: bottom;
    color: var(--text-1);
  }

  .left {
    transform: rotateX(90deg) rotateY(90deg) translateZ(calc(var(--outset-size) / 2 * -1)) translate(2vmin, -2vmin) scaleY(.8);
    transform-origin: right;
    color: var(--text-2);
  }
}

@layer demo.support {
  html {
    background: white;
  }
  
  @media (prefers-color-scheme: dark) {
    html {
      background: var(--gray-12);
    }
  }
  
  body {
    display: grid;
    place-content: center;
  }
}