.tile{display:grid;grid-template-areas:'stack';position:relative;height:100%;border-radius:6px;overflow:hidden;}.tile__foreground{grid-area:stack;position:relative;order:1;padding:2.5rem 4.5rem;transition:background 0.25s,color 0.25s;:hover > &{color:white;background:rgba(0,0,0,0.5);background-blend-mode:multiply;}> .tile__arrow{color:var(--pen-lnk-hv);display:block;height:20px;overflow:hidden;&::after{transform:translateX(-117px);display:inherit;height:inherit;content:'';clip-path:var(--long-arrow);position:relative;transition:background 0.25s,transform 0.25s;background:currentColor;}}:hover > & > .tile__arrow{color:inherit;&::after{transform:none;}}}.tile__background{grid-area:stack;position:relative;height:100%;width:100%;opacity:0;transition:opacity 0.25s;overflow:hidden;:hover > &{opacity:1;}img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}}.tile__link{z-index:1;position:absolute;inset:0;}.tile__title{font:var(--huge);margin-top:0;}