.masonry{--columns:8;display:grid;gap:1rem;grid-template-columns:repeat(var(--columns,12),1fr);grid-template-rows:repeat(var(--bs-rows,1),1fr);padding:1rem;position:relative}@media (max-width:991.98px){.masonry{--columns:7}}@media (max-width:767.98px){.masonry{--columns:6}}@media (max-width:575.98px){.masonry{--columns:2}}.masonry.dev:before{background-color:#34495e;content:"";top:0;right:0;bottom:0;left:0;position:absolute;z-index:-1}.masonry.dev>:before{background-color:#34495eb3;bottom:0;color:#fff;content:attr(debug);overflow:auto;position:absolute;right:0;top:0;white-space:break-spaces;width:60%;z-index:1}.masonry.dev>.intersect{outline:3px solid #adff2f}.masonry.dev>.append{--border-color:red}.masonry.dev>.resize{--border-color:#ef0}.masonry.dev>.append:after,.masonry.dev>.resize:after{background-color:var(--border-color);content:"";height:40px;position:absolute;right:10px;top:10px;width:40px;z-index:4}.masonry-meter{position:absolute}.masonry-meter pre{background:#0088ffa8;color:#feff00;font-weight:bolder;position:absolute;z-index:2}.masonry-meter:hover>pre{z-index:3}.masonry-meter:after{content:"";top:0;right:0;bottom:0;left:0;outline:3px dashed red;outline-offset:1px;position:absolute;z-index:1}.masonry-meter.border-success:after{outline-color:#46cc6b}
