/*
Block Name: Hero
Description: This is a hero block, designed to be used for page headers, with various customisation options.
*/
.block-hero{padding: 0;}
.block-hero .hero-area{overflow: hidden;}
.block-hero .hero-area .container{position: static;}
.block-hero .hero-area.preset-2 .container{position: relative;}
.block-hero .hero-area .grid{grid-template-columns: 1fr; align-items: center; grid-gap: 8rem; padding: clamp(4rem, 8vw, 8rem) 0;}
.block-hero .hero-area.has-img .grid{grid-template-columns: 1fr 1fr;}

.block-hero .hero-area .grid .col{position: relative; z-index: 1;}

.block-hero .hero-area .grid .col.image.preset-1{position: absolute; left: calc(50% + 4rem); right: 0; top: 50%; transform: translateY(-50%); min-height: 500px; height: 40vw; max-height: 85%; z-index: 0;}
.block-hero .hero-area .grid .col.image.preset-1 img{width: 100%; height: 100%; object-fit: cover; object-position: left;}

.block-hero .hero-area .grid .col.image.preset-2{position: absolute; top: 0; bottom: -1px; right: 0%; width: calc(50% - 4rem); display: flex; align-items: center; opacity: 0.7;}
.block-hero .hero-area .grid .col.image.preset-2 img{width: 100%; height: auto;}

.block-hero .hero-area .grid .col.image.preset-3{position: absolute; top: 0; bottom: 0; right: -10px; max-width: 50%; max-height: 100%; padding: 2rem 0; display: flex; align-items: center; opacity: 0.8;}
.block-hero .hero-area .grid .col.image.preset-3 img{width: 100%; max-height: 100%; object-fit: contain; height: auto;}

.block-hero .hero-area .grid .col.image.top{align-items: start;}
.block-hero .hero-area .grid .col.image.bottom{align-items: end;}

@media(max-width: 1250px){
	.block-hero .hero-area.has-img .grid{grid-template-columns: 3fr 1fr;}
	.block-hero .hero-area .grid .col.image.preset-1{display: none;}

	.block-hero .hero-area.preset-3 .grid .col.image{display: none;}
	.block-hero .hero-area.has-img.preset-3 .grid{grid-template-columns: 1fr;}
}

@media(max-width: 1024px){
	.block-hero .hero-area.has-img.preset-1 .grid{grid-template-columns: 1fr;}
	.block-hero .hero-area.preset-1 .grid .col.image{display: none;}

	.block-hero .hero-area.has-img.preset-2 .grid{grid-template-columns: 1fr 1fr;}
}

@media (max-width: 768px) {
	.block-hero .hero-area.has-img.preset-2 .grid{grid-template-columns: 1fr;}
	.block-hero .hero-area.has-img.preset-2 .grid .col.image{display: none;}

	.block-hero .hero-area.has-img.preset-3 .grid{grid-template-columns: 1fr;}
	.block-hero .hero-area.has-img.preset-3 .grid .col.image{display: none;}
}