/*
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 .column-icon { color: var(--brand-1); font-size: 6rem; margin-bottom: 1rem; }

.block-columns .col-icon{max-width:100px;margin:0 auto 2rem;}
.block-columns .flex-col > .button-block { margin-top: auto; }	

.block-columns .has-btn.col-bg-img{position: relative; border-radius: 2rem 0 2rem 0;}
.block-columns .has-btn.col-bg-img a.button{position: absolute; bottom: 2rem; right: 2rem;}

.block-columns.accent .container{position: static;}
.block-columns.accent .col.accent{position: absolute; right: 0; left: 45%;}
.block-columns.accent .col.accent .col-image{display: flex; justify-content: flex-end;}

.block-columns.accent .col.accent.custom-size{top: 0; bottom: 0; margin: 2rem 0;}
.block-columns.accent .col.accent.custom-size .col-image, .block-columns.accent .col.accent.custom-size img{height: 100%;}

.block-columns.accent .col.accent.custom-size img{width: auto;}

.block-columns .highlight-col{border-radius: 0.5rem; padding: 2rem;}

@media(max-width: 1440px){
	.block-columns.accent .col.accent.custom-size{left: 66%; display: flex; align-items: center;}
	.block-columns.accent .col.accent.custom-size .col-image, .block-columns.accent .col.accent.custom-size img{height: auto;}
}

@media(max-width: 768px){
	.block-columns.accent .col.accent.custom-size{display: none;}
}

@media screen and (max-width:576px ) {
	.col-bg-img { min-height: 30vh;}
}