.card{background-color:var(--color-off-white);transform-style:preserve-3d;width:100%;height:100%;margin-bottom:8px;position:relative}.card:before,.card:after{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0;transform:translateZ(-1px)}.card:before{opacity:.5}.card:after{opacity:.3}.card--dark{background-color:var(--color-off-white)}.card--dark:before,.card--dark:after{background-color:var(--color-accent-brown)}.card--light,.card--light:before,.card--light:after{background-color:var(--color-text-light)}.card--sm,.card--lg{transition:transform .2s ease-out}.card--sm:hover,.card--lg:hover{transform:translate(1px,1px)}.card--lg:before{transition:transform .2s ease-out;transform:translate(6px,6px)translateZ(-1px)}.card--lg:after{transition:transform .2s ease-out;transform:translate(12px,12px)translateZ(-1px)}.card--sm:before{transition:transform .2s ease-out;transform:translate(4px,4px)translateZ(-1px)}.card--sm:after{transition:transform .2s ease-out;transform:translate(8px,8px)translateZ(-1px)}.card--lg:hover:before,.card--lg:hover:after,.card--sm:hover:before,.card--sm:hover:after{transform:translate(0)translateZ(-1px)}