@layer bricks {.brxe-code{width:100%}}.grid {display: grid; grid-template-columns: var(--grid-3); }.grid li { position: relative;}.grid li:hover ~ li:last-child:after,.grid li:last-child:hover:after,.grid li:hover ~ li:last-child:before,.grid li:last-child:hover:before { opacity: 1; transition: 1s ease;}.grid li:last-child:after,.grid li:last-child:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; pointer-events: none; clip-path: polygon(var(--offset) var(--offset), var(--offset) calc(100% - var(--offset)), calc(100% - var(--offset)) calc(100% - var(--offset)), calc(100% - var(--offset)) var(--offset)); -webkit-clip-path: polygon(var(--offset) var(--offset), var(--offset) calc(100% - var(--offset)), calc(100% - var(--offset)) calc(100% - var(--offset)), calc(100% - var(--offset)) var(--offset)); opacity: 0; transition: opacity 1s, transform 1s 1s, background 1s;}.grid li:last-child:after { mix-blend-mode: multiply; background: yellow; border-radius: var(--radius);} .grid li:last-child:before { backdrop-filter: grayscale(100%) blur(2px); -webkit-backdrop-filter: grayscale(100%) blur(2px);}.grid li:nth-child:hover ~ li:last-child:after { background: yellow; } .grid li:last-child:hover:after { background: yellow; }.grid { grid-template-columns: var(--grid-3);}.grid li:last-child:after,.grid li:last-child:before { left: 100%; transform: translate3d(-100%, -100%, 0);}:root { --offset: 8px; --radius: 12px; --grid-3: repeat(3, 1fr);}#brxe-qackfm {width: 100%}