@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-home-hero {
position: relative;
background: $grey-primary;
min-height: rem-calc(440);
text-align: center;
margin-bottom: rem-calc(42);
&::before{
content: "";
position: absolute;
top: 0;
left: 0;
background: rgb(0,0,0);
background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 61.78%);
width: 100%;
height: rem-calc(234);
z-index: 10;
}
@include bp($md){
display: flex;
align-items: center;
min-height: rem-calc(911);
margin-bottom: 0;
}
&__wrapper {
padding: rem-calc(105 0 40 0);
position: relative;
z-index: 5;
letter-spacing: 0.05em;
overflow: hidden;
@include bp($md){
padding: 4rem 0;
}
.heading {
margin-bottom: rem-calc(7);
@include bp($md){
margin-bottom: rem-calc(32);
}
}
p{
font-weight: 400;
font-size: rem-calc(16);
line-height: rem-calc(24);
margin-bottom: rem-calc(33);
@include bp($md){
font-size: rem-calc(24);
line-height: rem-calc(28);
margin-bottom: rem-calc(64);
}
}
ol {
li {
margin-bottom: 1rem;
&:last-of-type {
margin-bottom: 0;
}
}
}
}
&__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
&__feature{
width: calc(100% - 32px);
background-color: $white;
border-top-left-radius: rem-calc(24);
border-top-right-radius: rem-calc(24);
margin: 0 auto;
z-index: 1;
padding: rem-calc(24);
text-align: left;
position: relative;
bottom: -71px;
height: rem-calc(153);
@include bp($md){
padding:rem-calc(21 0 21 48);
position: absolute;
width: 50%;
border-top-left-radius: rem-calc(40);
border-top-right-radius: 0;
bottom: 0;
right: 0;
margin: 0 0 0 auto;
height: rem-calc(150);
}
@include bp($lg){
width: 40%;
}
&::before{
@include bp($md){
content: "";
position: absolute;
width: rem-calc(40);
height: rem-calc(40);
left: -40px;
bottom: 0;
background-color: transparent;
background-image: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAmCAYAAAC29NkdAAABC0lEQVRYhe3Y2w2CQBCF4dEK6EA7kA60AynBEuzAVujAEijFEizhN5OMCSrITdjz4En2AZ4+ZmbJgikH2K6lhWbZHzgx8i3O1YE7AUN7gLuqzXE5gHKLcwFDe4DKK6iKy4iotrgQMLTn2V7JFvsBgVoESK8BSlnge/UUgaUssKl6asCP6skAgVMTTgIYrb0pA69tuORA4PINlxQIFF24ZMCYu7sksGtTJAUOxS0KjG+MQbjFgLEhes3c4sA+r5IkwJi3qodheSBwHtvSWYHA4RdV+zkw2tl4XEoKnKNi71mNQGVmdjKzo5kdJj1hj3QCA+T/SfYBmh1Vz8rnJ244xJdf+9oELN1PHDN7ALL0MQwBMR/xAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: right bottom;
}
}
&_row{
width: 100%;
text-decoration: none;
@include bp($md){
max-width: rem-calc(440);
}
&:hover{
.feature-heading{
color: $orange;
}
}
}
&_cta{
width: 64px;
}
.overline{
color:$secondary;
letter-spacing: 0.2em;
margin-bottom: rem-calc(8);
@include bp($md){
margin-bottom: rem-calc(12);
}
}
.feature-heading{
font-weight: 400;
font-size: rem-calc(16);
line-height: rem-calc(20);
color: $black;
text-decoration: none;
margin-bottom: rem-calc(8);
@include bp($sm){
padding-right: rem-calc(16px);
}
@include bp($md){
margin-bottom: rem-calc(12);
font-size: rem-calc(20);
line-height: rem-calc(24);
}
}
.post-meta{
font-weight: 400;
font-size: rem-calc(14);
line-height: rem-calc(16);
letter-spacing: 0.05em;
color: $primary;
@include bp($md){
font-size: rem-calc(16);
}
.read-time{
position: relative;
padding-left: rem-calc(28);
&::before{
content: "";
position: absolute;
width: rem-calc(16);
height: rem-calc(16);
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.58065 0 0 3.58065 0 8C0 12.4194 3.58065 16 8 16C12.4194 16 16 12.4194 16 8C16 3.58065 12.4194 0 8 0ZM14.9677 8C14.9677 11.8387 11.8387 14.9677 8 14.9677C4.16129 14.9677 1.03226 11.871 1.03226 8C1.03226 4.19355 4.12903 1.03226 8 1.03226C11.8065 1.03226 14.9677 4.16129 14.9677 8ZM10.1613 10.871C10.3226 11 10.5806 10.9355 10.6774 10.7742L10.9677 10.4194C11.0968 10.2258 11.0323 10 10.871 9.87097L8.6129 8.22581V3.48387C8.6129 3.29032 8.41935 3.09677 8.22581 3.09677H7.77419C7.54839 3.09677 7.3871 3.29032 7.3871 3.48387V8.64516C7.3871 8.77419 7.41935 8.87097 7.51613 8.96774L10.1613 10.871Z' fill='black'/%3E%3C/svg%3E%0A");
}
}
}
}
.btn{
&--hollow {
padding: rem-calc(15 15 15 15);
color: $white;
font-size: rem-calc(14);
line-height: rem-calc(17);
letter-spacing: 0.15em;
width: 100%;
@include bp($md){
width: auto;
margin-right: 0.5rem;
margin-left: 0.5rem;
padding: rem-calc(20 48 20 48);
font-size: rem-calc(18);
line-height: rem-calc(22);
}
}
&--tertiary{
&::after{
background-image: url("data:image/svg+xml,%3Csvg fill='none' width='14' height='13' xmlns='http://www.w3.org/2000/svg' viewBox='-0.17 0.52 13.87 12.58'%3E%3Cpath d='M0.334961 6.80981H13.2057' stroke='%23ffffff'%3E%3C/path%3E%3Cpath d='M7.47852 1.01758L13.2036 6.80911L7.47852 12.6013' stroke='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
}
}
}
.block-home-hero__wrapper {
max-width: 1254px;
margin: 0 auto;
}
&.has-img {
h1,
h2,
h3,
h4,
p,
ol,
ul {
color: #fff;
}
}
}