/*
Block Name: Hero
Description: This is a hero block, designed to be used for page headers, with various customisation options.
*/

.block-hero {position: relative;}
.block-hero .grid{grid-template-columns: 2fr 1fr; grid-gap: 2rem;}
.block-hero .text-col{position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; z-index: 10;}
.block-hero .hero-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}

.block-hero .content-wrapper{padding: 12.5rem 3rem; display: grid; align-items: center; justify-content: center; text-transform: uppercase;}

.block-hero .image-col{background-position: center; background-size: cover; background-repeat: no-repeat;}

.block-hero h1,
.block-hero h2,
.block-hero h3,
.block-hero h4,
.block-hero h5,
.block-hero h6{color: #fff;}

.block-hero h1{font-size: 7rem;}
.block-hero h2{font-size: 3.25rem;}

.block-hero h1+h2{margin-top: 2rem;}