:root{--blocks-gap:0;--blocks-border-radius:9rem;--blocks-transition-opacity:0.3s;--blocks-transition-height:0.5s;--blocks-columns:3;--block-padding:2rem;--block-overlay-color:var(--color-black);--block-overlay-opacity:50%;--block-image-maxwidth:20rem}.blocks-wrapper{display:grid;grid-template-columns:repeat(var(--blocks-columns),1fr);grid-gap:var(--blocks-gap);grid-auto-rows:1fr;&[data-columns="2"]{--blocks-columns:1;@media (min-width:640px){--blocks-columns:2}}&[data-columns="3"]{--blocks-columns:1;@media (min-width:960px){--blocks-columns:3}}&[data-columns="4"]{--blocks-columns:1;@media (min-width:640px){--blocks-columns:2}@media (min-width:1200px){--blocks-columns:4}}}.block{container:blocks-block/inline-size;position:relative;&:before{background:linear-gradient(to bottom right,transparent,var(--block-overlay-color));content:"";inset:0;opacity:var(--block-overlay-opacity);position:absolute}&:not(.block-has-content){display:grid;place-content:center}}.block-wrapper{padding:var(--block-padding);@container blocks-block (width > 320px){--block-padding:3rem}}.block-image{margin-bottom:1rem;max-width:var(--block-image-maxwidth);.block-has-content &{--block-image-maxwidth:5rem;aspect-ratio:1}& img{height:100%;object-fit:contain;width:100%}}