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