/*
Block Name: Icon Columns
Description: The standard columns block with the option to add Font Awesome icons to the top.
*/

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-icon-columns .col{position: relative; padding-top: 6rem;}
.block-icon-columns .col::before{content: ''; background-color: var(--brand-1); opacity: 0.15; width: 12rem; height: 12rem; position: absolute; top: -6rem; left: 50%; transform: translateX(-50%); border-radius: 100%; z-index: -1;}

.block-icon-columns .col-icon-fa { width: 10rem; height: 10rem; position: absolute; top: -5rem; background: var(--brand-4); left: 50%; transform: translateX(-50%); border-radius: 100%; display: flex; align-items: center; justify-content: center; box-shadow: 0rem 2rem 2rem rgba(0,0,0,.5); }
.block-icon-columns .col-icon-fa i { color: #fff; border-radius: 100%; font-size: 4.5rem; }

@media(max-width: 768px){
    .block-icon-columns .grid{grid-gap: 8rem;}
}