.images2grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 12px;margin: 16px 0;padding: 16px;background:rgb(255,255,255,.9);border: 2px solid rgb(204,204,204,.4);}figure {place-self:center;position:relative;border:solid 1em transparent;padding:.75em;-webkit-clip-path: polygon(0 2.5em, 2.5em 0, 100% 0, 100% calc(100% - 2.5em), calc(100% - 2.5em) 100%, 0 100%);clip-path: polygon(0 2.5em, 2.5em 0, 100% 0, 100% calc(100% - 2.5em), calc(100% - 2.5em) 100%, 0 100%);}figure::before, figure::after {--i: 0;--s: calc(2*var(--i) - 1);position:absolute;top: calc(var(--i)*100% - var(--s)*0.25em);left: calc(var(--i)*100% - var(--s)*0.25em);width: 3.5355339059em;height:.5em;transform-origin: 50% 0;transform: translate(-50%) rotate(calc(var(--i)*.5turn - 45deg)) translatey(-1px);background: radial-gradient(farthest-side at 50% 0, #0008, #0004 30%, transparent);content:'';}figure::after {--i: 1 ;}figcaption::before {position: absolute;inset: 0;z-index: -1;background: #fff;box-shadow: 3px 3px 13px #0007;content:'';}img {width:100%;height:auto;}em {font-size:.75em;}@media (min-width: 768px) and (max-width: 1280px) {.images2grid {grid-template-columns: repeat(2, 1fr);}}@media (max-width: 768px) {.images2grid {grid-template-columns:repeat(1, 1fr);}figure {padding:.75em;}}