<div class="scd-brick">
  <div class="scd-brick__stage">
    <div class="scd-brick__brick">Foundation<span class="scd-brick__num">01</span></div>
    <div class="scd-brick__brick">Framework<span class="scd-brick__num">02</span></div>
    <div class="scd-brick__brick">Structure<span class="scd-brick__num">03</span></div>
    <div class="scd-brick__brick">Facade<span class="scd-brick__num">04</span></div>
    <div class="scd-brick__brick">Rooftop<span class="scd-brick__num">05</span></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@500&display=swap');

.scd-brick, .scd-brick *, .scd-brick *::before, .scd-brick *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-brick {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0e0e12;
  font-family: 'Archivo', sans-serif;
}
.scd-brick__stage {
  position: relative;
  width: 320px; height: 300px;
  perspective: 1200px;
}
.scd-brick__brick {
  position: absolute; left: 0;
  width: 240px; height: 64px;
  border-radius: 8px;
  display: flex; align-items: center;
  padding: 0 22px;
  color: #0e0e12;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.1rem; letter-spacing: .02em;
  box-shadow: 0 10px 0 rgba(0,0,0,.35);
  transition: transform .5s cubic-bezier(.3,.9,.3,1), box-shadow .5s;
  cursor: pointer;
}
.scd-brick__brick:nth-child(1) { top: 0; background: #f8d44c; transform: translateX(0); z-index: 5; }
.scd-brick__brick:nth-child(2) { top: 52px; background: #f59a3c; transform: translateX(24px); z-index: 4; }
.scd-brick__brick:nth-child(3) { top: 104px; background: #ee6f5e; transform: translateX(48px); z-index: 3; }
.scd-brick__brick:nth-child(4) { top: 156px; background: #d65b88; transform: translateX(72px); z-index: 2; }
.scd-brick__brick:nth-child(5) { top: 208px; background: #8d5fb0; transform: translateX(96px); z-index: 1; color: #fff; }
.scd-brick__stage:hover .scd-brick__brick { transform: translateX(0) !important; }
.scd-brick__brick:hover {
  transform: translateX(0) translateY(-8px) scale(1.04) !important;
  box-shadow: 0 18px 0 rgba(0,0,0,.4);
}
.scd-brick__num { margin-left: auto; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .scd-brick__brick { transition: none !important; }
}