:root{--d:700ms;--e:cubic-bezier(0.19,1,0.22,1)}*{box-sizing:border-box}body,html{height:100%}body{display:grid;place-items:center}.page-content{display:grid;grid-gap:1rem;padding:1rem;max-width:1024px;margin:0 auto;font-family:var(--font-sans)}@media(min-width:600px){.page-content{grid-template-columns:repeat(2,1fr)}}@media(min-width:800px){.page-content{grid-template-columns:repeat(4,1fr)}}.card{position:relative;display:flex;align-items:flex-end;overflow:hidden;padding:1rem;width:100%;text-align:center;color:#f5f5f5;background-color:#f5f5f5;box-shadow:0 1px 1px rgba(0,0,0,.1),0 2px 2px rgba(0,0,0,.1),0 4px 4px rgba(0,0,0,.1),0 8px 8px rgba(0,0,0,.1),0 16px 16px rgba(0,0,0,.1)}@media(min-width:600px){.card{height:350px}}.card:after{display:block;height:200%;background-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.009) 11.7%,rgba(0,0,0,.034) 22.1%,rgba(0,0,0,.072) 31.2%,rgba(0,0,0,.123) 39.4%,rgba(0,0,0,.182) 46.6%,rgba(0,0,0,.249) 53.1%,rgba(0,0,0,.32) 58.9%,rgba(0,0,0,.394) 64.3%,rgba(0,0,0,.468) 69.3%,rgba(0,0,0,.54) 74.1%,rgba(0,0,0,.607) 78.8%,rgba(0,0,0,.668) 83.6%,rgba(0,0,0,.721) 88.7%,rgba(0,0,0,.762) 94.1%,rgba(0,0,0,.79));transform:translateY(-50%);transition:transform calc(var(--d)*2) var(--e)}.card:after,.card:before{content:"";position:absolute;top:0;left:0;width:100%;pointer-events:none}.card:before{height:110%;background-size:cover;background-position:50%;transition:transform calc(var(--d)*1.5) var(--e);background-image:var(--card-background,none)}.content{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:1rem;transition:transform var(--d) var(--e);z-index:1}.content>*+*{margin-top:1rem}.title{font-size:1.3rem;font-weight:700;line-height:1.2}.copy{font-family:var(--font-serif);font-size:1.125rem;font-style:italic;line-height:1.35}.btn{cursor:pointer;margin-top:1.5rem;padding:.75rem 1.5rem;font-size:.65rem;font-weight:700;letter-spacing:.025rem;text-transform:uppercase;color:#fff;background-color:#000;border:none;text-decoration:none}.btn:hover{background-color:#0d0d0d}.btn:focus{outline:1px dashed #ff0;outline-offset:3px}@media(hover:hover)and (min-width:600px){.card:after{transform:translateY(0)}.content{transform:translateY(calc(100% - 4.5rem))}.content>:not(.title){opacity:0;transform:translateY(1rem);transition:transform var(--d) var(--e),opacity var(--d) var(--e)}.card:focus-within,.card:hover{align-items:center}.card:focus-within:before,.card:hover:before{transform:translateY(-4%)}.card:focus-within:after,.card:hover:after{transform:translateY(-50%)}.card:focus-within .content,.card:hover .content{transform:translateY(0)}.card:focus-within .content>:not(.title),.card:hover .content>:not(.title){opacity:1;transform:translateY(0);transition-delay:calc(var(--d)/8)}.card:focus-within .content,.card:focus-within .content>:not(.title),.card:focus-within:after,.card:focus-within:before{transition-duration:0s}}