.corner-shape-wrapper{--min-col:200px;--max-col:400px;--gap:0.5rem;--border-radius:0;--corner-type:notch;--corner-type-center:square;--corner-type-outer:square;--scale-center:0.94;display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(var(--min-col),25%,var(--max-col)),1fr));gap:var(--gap)}.corner-shape-group-wrapper{display:flex;flex-direction:column;width:100%}.corner-shape-group{display:grid;gap:var(--gap);grid-template-columns:repeat(4,1fr);grid-template-areas:"tl-start tl-start tr-start tr-start" "tl-stop m m tr-stop" "bl-start bl-start br-start br-start" "bl-end bl-end br-end br-end";position:relative;width:100%}.corner-shape-group:has(:hover)>:not(:hover){opacity:.6;filter:grayscale(.5)}.corner-shape-item{aspect-ratio:1;border-radius:0;scale:var(--scale,1);grid-area:var(--grid-area);grid-row-end:var(--grid-row-end);transition:scale,box-shadow,filter,border-radius,z-index;transition-duration:.15s;transition-timing-function:ease-in-out;overflow:hidden;border:1px solid var(--color-border,#272636);box-shadow:0 0 0 var(--shadow-distance,0) rgba(0,0,0,.25);position:relative;z-index:1}.corner-shape-item>img{width:100%;height:100%;object-fit:cover}.corner-shape-item:hover{--shadow-distance:1em;--scale:1.5!important;--border-radius:0!important;z-index:20!important;transition-duration:1.5s;transition-timing-function:cubic-bezier(.202,.028,1.157,.092,1.372,.128,1.337,.152,.962,.22,.861,.26,1.052,.392,.981,.524,1,1)}.corner-shape-item:first-child{--grid-area:tl-start;--grid-row-end:tl-stop;border-radius:0}.corner-shape-item:nth-child(2){--grid-area:tr-start;--grid-row-end:tr-stop;border-radius:0}.corner-shape-item:nth-child(3){--grid-area:m;--grid-row-end:bl-start;--scale:var(--scale-center);z-index:2}.corner-shape-item:nth-child(3):hover{z-index:20!important}.corner-shape-item:nth-child(4){--grid-area:bl-start;--grid-row-end:bl-stop;border-radius:0}.corner-shape-item:nth-child(5){--grid-area:br-start;--grid-row-end:br-stop;border-radius:0}.corner-shape-wrapper.bevel .corner-shape-item{border-radius:0}.corner-shape-wrapper.scoop .corner-shape-item{border-radius:20px}.corner-shape-wrapper.scoop .corner-shape-item:nth-child(3){border-radius:50%}.corner-shape-wrapper.notch .corner-shape-item,.corner-shape-wrapper.notch .corner-shape-item:nth-child(3){border-radius:0}.corner-shape-wrapper.round .corner-shape-item{border-radius:50%}