/*
Block Name: Columns
Description: An extremely flexible block allowing simple and complex layouts. This block is used for images and static text purposes.
*/

body.wp-admin section.block-columns { border: 1px solid #ccc; }
body.wp-admin section .container .grid:empty:before { font-size: 2rem; color: #e88b39; font-weight: 600; content: "This is an empty *block* - add content"; padding: 2rem 0; display: block;}
body.wp-admin section .container .grid .col:empty:before { color: #e88b39; font-weight: 600; content: "This is an empty *column* - add content"; padding: 2rem 0; display: block;}

.block-columns .col-icon{max-width:100px;margin:0 auto 2rem;}
.block-columns .col-image img { width: 100%; height: auto; }
.block-columns{position: relative;}
.block-columns .container{position: static;}
.block-columns .col.styled-img img{position: absolute; right: 0; top: calc(0 - 5rem); bottom: calc(0 - 5rem);}

.block-columns.numbered-columns .col{padding: 5rem 2rem 2rem; border: 1px solid #222; position: relative;}
.block-columns.numbered-columns .col::before{content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 6rem; height: 6rem; background-color: #222; color: #fff; font-size: 2.5rem; font-weight: 600; display: flex; justify-content: center; align-items: center; border-radius: 100%;}

.block-columns.numbered-columns .col:nth-of-type(1)::before{content: '1';}
.block-columns.numbered-columns .col:nth-of-type(2)::before{content: '2';}
.block-columns.numbered-columns .col:nth-of-type(3)::before{content: '3';}
.block-columns.numbered-columns .col:nth-of-type(4)::before{content: '4';}

@media(max-width:1024px){
    .block-columns .grid{grid-template-columns:1fr !important;}
}