.materials-section { position: relative; width: 1440px; height: 2340px; margin: 0; padding: 0; }
.material-card { position: absolute; width: 180px; height: 180px; perspective: 1000px; }
.material-card-inner { position: relative; width: 180px; height: 180px; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(.35,.05,.25,1); }
.material-card.is-flipped .material-card-inner { transform: rotateY(180deg); }
.material-face { position: absolute; inset: 0; overflow: hidden; background: var(--material-color); backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; }
.material-back { transform: rotateY(180deg); }
.material-back-label-mask { position: absolute; left: 1px; top: 1px; width: 178px; height: 30px; background: var(--material-color); pointer-events: none; }
.material-label-mask, .material-name-art { position: absolute; pointer-events: none; }
.material-number-art { position: absolute; inset: 0; width: 180px; height: 180px; pointer-events: none; }
.material-illustration-frame { position: absolute; left: 0; top: 0; width: 180px; height: 180px; overflow: hidden; pointer-events: none; }
.material-illustration { position: absolute; display: block; left: 0; top: 0; width: 180px; height: 180px; max-width: none; object-fit: contain; user-select: none; pointer-events: none; }
.material-toggle { position: absolute; z-index: 1; inset: 0; display: block; width: 180px; height: 180px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; appearance: none; cursor: pointer; }
.material-toggle:focus { outline: none; }
.material-toggle:focus-visible { outline: 1px dashed #273238; outline-offset: -5px; }

/* Remove the preceding project title's antialiased edge from the source slice. */
.materials-section::before {
  content: ''; position: absolute; z-index: 1; left: 0; top: 0;
  width: 1440px; height: 3px; background: #95a3aa; pointer-events: none;
}