body.wp-admin section { border: 1px solid #ccc; }
body.wp-admin section .container .grid:empty:before { color: red; 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: red; font-weight: 600; content: "This is an empty *box* - add content"; padding: 2rem 0; display: block;}

.block-boxes .grid {grid-gap:5rem;}

.block-boxes .box {
    position: relative;
    padding: 28px;
    box-shadow: 0 8px 30px rgba(10, 40, 80, .04);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    cursor: pointer;
    overflow: hidden;
}

/* Make entire link behave like a block */
.block-boxes a.box {
    display: flex;
    text-decoration: none;
    color: inherit;
}

/* Background layer */
.block-boxes .box-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.block-boxes .box-bg img,
.block-boxes .box-bg-color {
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 16px;
}

/* Overlay layer */
.block-boxes .overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
	opacity: 0.7;
    pointer-events: none;
	border-radius: 16px;
}

/* Content sits above everything */
.block-boxes .box-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

/* Text */
.block-boxes .box h3,
.block-boxes .box h4 {
    color: #fff;
    margin-bottom: 0;
	text-transform: uppercase;
}
.block-boxes .box {transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.block-boxes .box-bg img,
.block-boxes .box-bg-color {transition: opacity 0.3s ease, transform 0.3s ease;}
.block-boxes .overlay {transition: opacity 0.3s ease;}

/* -----------------------
   HOVER
----------------------- */
.block-boxes .box:hover {transform:translateY(-2px);}

/* Colour boxes: make background white */
.block-boxes .box:hover .box-bg-color {background:#fff !important;}

/* Colour boxes: text becomes original colour */
.block-boxes .box:hover h4,
.block-boxes .boxhover .box-text {color:var(--box-color);}

/* Image boxes: increase overlay */
.block-boxes .box:hover .overlay {opacity:1;}
.block-boxes .box.has-image:hover h4, .block-boxes .box.has-image:hover.box-text {color: #fff !important;}


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