Information for Investors
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-hero-rounded {
position: relative;
background: $grey-primary;
min-height: rem-calc(485);
display: flex;
align-items: center;
overflow: hidden;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
@include bp($md){
min-height: rem-calc(585);
}
@include bp($xl){
min-height: rem-calc(785);
}
&__wrapper {
padding: 4rem 0;
position: relative;
z-index: 5;
.overline{
margin-top: 0;
margin-bottom: rem-calc(16);
}
.heading{
letter-spacing: 0.05em;
font-size: rem-calc(32);
line-height: rem-calc(40);
font-weight: 300;
margin-bottom: 0;
@include bp($md){
font-size: rem-calc(64);
line-height: rem-calc(72);
}
strong{
font-weight: 600;
}
}
p{
font-size: rem-calc(16);
line-height: rem-calc(22);
margin-top: rem-calc(32);
margin-bottom: 0;
letter-spacing: 0.05em;
@include bp($lg){
font-size: rem-calc(20);
line-height: rem-calc(28);
margin-top: rem-calc(40);
}
}
}
&__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.btn {
margin-right: 0;
margin-top: rem-calc(32);
@include bp($lg){
margin-top: rem-calc(48);
}
}
&.content-alignment-left {
text-align: left;
min-height: rem-calc(450);
@include bp($md){
min-height: rem-calc(450);
}
@include bp($xl){
min-height: rem-calc(650);
}
.block-hero-rounded__wrapper{
max-width: rem-calc(634);
}
}
&.content-alignment-right {
text-align: right;
min-height: rem-calc(650);
@include bp($md){
min-height: rem-calc(450);
}
@include bp($xl){
min-height: rem-calc(650);
}
.block-hero-rounded__wrapper{
max-width: rem-calc(634);
}
}
&.content-alignment-center {
text-align: center;
.btn {
margin-right: 0.5rem;
margin-left: 0.5rem;
}
.block-hero-rounded {
max-width: rem-calc(1075);
margin: 0 auto;
}
}
&.has-img {
&:after {
content: "";
z-index: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: rem-calc(375);
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0.09%, rgba(0,0,0,0) 99.75%);
}
&:before {
content: "";
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0);
background: linear-gradient(90.1deg, #000000 0.09%, rgba(0, 0, 0, 0) 99.75%);
}
h1,
h2,
h3,
h4,
p{
color: $white;
}
.btn {
color: $white;
&:hover{
color: $black;
}
}
}
}