.bastet-block-heading {
&.is-style-default.text-center, &.is-style-tall.text-center, &.is-style-large.text-center {
h2 { text-align: center; }
h2:after,.heading:after {
right: 0;
left: 0;
margin: auto;
}
}
&.is-style-default .heading {
h2 {
position: relative;
font-size: 48px;
line-height: 55px;
text-transform: none;
z-index: 2;
margin: 18px 0 14px 0;
text-align: center;
padding-bottom: 22px;
}
&:after {
content: "";
position: absolute;
bottom:0;
left: 0;
right: 0;
margin: auto;
width: 110px;
height:59px;
z-index: 1;
mask-image: url("images/wave-line.svg");
mask-size: cover;
background-color: bastet-color();
}
}
&.is-style-tall .heading {
position: relative;
margin-bottom: 40px;
text-align: left;
h2 {
position: relative;
font-size: 32px;
line-height: 32px;
text-transform: none;
z-index: 2;
margin: 0;
padding-bottom: 20px;
@include respond-above( 'start', 'mobile' ) {
font-size: 28px;
line-height: 28px;
}
}
&:after {
content: "";
position: absolute;
bottom:0;
left: -8px;
margin: auto;
width: 110px;
height:60px;
z-index: 1;
mask-image: url("images/wave-line.svg");
mask-size: cover;
background-color: bastet-color();
}
}
&.is-style-large .heading {
position: relative;
margin-bottom: 40px;
text-align: left;
h2 {
position: relative;
font-size: 42px;
line-height: 42px;
text-transform: none;
z-index: 2;
margin: 0;
padding-bottom: 24px;
@include respond-above( 'start', 'mobile' ) {
font-size: 28px;
line-height: 28px;
}
}
&:after {
content: "";
position: absolute;
bottom:0;
left: -8px;
margin: auto;
width: 140px;
height:75px;
z-index: 1;
mask-image: url("images/wave-line.svg");
mask-size: cover;
background-color: bastet-color();
}
}
&.is-style-widget {
.heading {
position: relative;
&:before,
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 1px;
border-bottom: 1px solid;
opacity: 0.1;
}
&:before {
left: 0;
}
&:after {
right: 0;
}
}
h2 {
position: relative;
font-size: 14px;
line-height: 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
margin: auto;
margin-bottom: 40px;
padding: 0 20px;
display: table;
z-index: 2;
&:after {
position: absolute;
bottom: -9px;
left: 0;
width: 40px;
height: 1px;
background: bastet-color();
}
}
}
&.center {
text-align: center;
.heading:after {
right: 0;
}
}
}