/* The hierarchy is a glimpse, with no profiles or identifying labels. */
.bbi-page .hatter-pyramid { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 1100px; margin: 0 auto; gap: 2rem 1.5rem; }
.bbi-page .hatter-pyramid__slot:nth-child(1) { grid-column: 5 / 9; grid-row: 1; }
.bbi-page .hatter-pyramid__slot:nth-child(2) { grid-column: 3 / 7; grid-row: 2; }
.bbi-page .hatter-pyramid__slot:nth-child(3) { grid-column: 7 / 11; grid-row: 2; }
.bbi-page .hatter-pyramid__slot:nth-child(4) { grid-column: 1 / 5; grid-row: 3; }
.bbi-page .hatter-pyramid__slot:nth-child(5) { grid-column: 9 / 13; grid-row: 3; }
.bbi-shadow { --panel-bg: linear-gradient(155deg, #444665, #17192d); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 300px; padding: 1.3rem; }
.bbi-shadow::before, .bbi-shadow::after { border-radius: var(--wobble-sm); }
.bbi-shadow__sprite { width: min(100%, 290px); height: 260px; object-fit: contain; filter: brightness(.65) drop-shadow(0 8px 16px #0008); }
.bbi-shadow h2 { font-family: var(--font); font-weight: 400; color: var(--cream); font-size: clamp(1.1rem, 2vw, 1.65rem); text-align: center; margin: .5rem 0 0; }
@media (max-width: 700px) {
  .bbi-page .hatter-pyramid { gap: 1rem .75rem; }
  .bbi-page .hatter-pyramid__slot:nth-child(1) { grid-column: 4 / 10; }
  .bbi-page .hatter-pyramid__slot:nth-child(2) { grid-column: 2 / 7; }
  .bbi-page .hatter-pyramid__slot:nth-child(3) { grid-column: 7 / 12; }
  .bbi-page .hatter-pyramid__slot:nth-child(4) { grid-column: 1 / 6; }
  .bbi-page .hatter-pyramid__slot:nth-child(5) { grid-column: 8 / 13; }
  .bbi-shadow { min-height: 180px; padding: .65rem; }
  .bbi-shadow__sprite { height: 170px; }
}