/*
Block Name: Full Width Image
Description: A simple full width image block.
*/

.block-full-width-image { position: relative; color: #fff; padding: 15rem 0;}
.block-full-width-image .full-width-cta-content{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.block-full-width-image .full-width-cta-content .cta-content-wrapper{ max-width: 50% }
.block-full-width-image.content-full-width .full-width-cta-content .cta-content-wrapper{ max-width:100% }
.block-full-width-image.content-full-width .full-width-cta-content::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); }

.block-full-width-image h1, 
.block-full-width-image h2, 
.block-full-width-image h3, 
.block-full-width-image h4, 
.block-full-width-image h5, 
.block-full-width-image h6,
.block-full-width-image a { color: #fff; }

.block-full-width-image h3{ font-size: 6.25rem ;}
.block-full-width-image p{ font-size: 2.25rem ;}

.block-full-width-image a:hover{ text-decoration: underline; color: #fff;}

.block-full-width-image a.button{ background: #fff ; color: #000; }
.block-full-width-image a.button:hover{ background: #000 ; color: #fff; }

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 *column* - add content"; padding: 2rem 0; display: block;}

@media (max-width:900px) {
    .block-full-width-image::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
    .block-full-width-image .full-width-cta-content .cta-content-wrapper{ max-width:85%; padding: 2rem; text-shadow: 0 0 10px rgba(0,0,0,0.3);}
    .block-full-width-image h3{ font-size: 3.5rem ;}
    .block-full-width-image p{ font-size: 1.75rem ;}
}