CLOUD & MIGRATION
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-service-hero {
padding: rem-calc(148 0 0 0);
position: relative;
background: $black;
min-height: rem-calc(440);
text-align: center;
margin-bottom: rem-calc(82);
@include bp($md){
padding: rem-calc(171 0 163 0);
text-align: left;
min-height: rem-calc(792);
margin-bottom: rem-calc(103);
}
.service-hero-row{
display: flex;
align-items: center;
}
&__wrapper {
position: relative;
z-index: 5;
letter-spacing: 0.05em;
max-width: rem-calc(610);
color: $white;
.overline{
color: $white;
}
.heading {
font-size: rem-calc(32);
line-height: rem-calc(40);
font-weight: 300;
letter-spacing: 0.05em;
@include bp($md){
font-size: rem-calc(64);
line-height: rem-calc(72);
}
}
}
&__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: absolute;
left: 0;
right: 0;
bottom: -71px;
height: rem-calc(153);
@include bp($md){
padding:rem-calc(21 0 21 48);
width: 50%;
border-top-left-radius: rem-calc(40);
border-top-right-radius: 0;
bottom: 0;
left:auto;
right: 0;
margin: 0 0 0 auto;
}
@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%;
@include bp($md){
max-width: rem-calc(440);
}
}
&_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{
margin-bottom: rem-calc(8);
@include bp($md){
margin-bottom: rem-calc(12);
}
a{
font-weight: 400;
font-size: rem-calc(16);
line-height: rem-calc(20);
color: $black;
text-decoration: none;
@include bp($md){
font-size: rem-calc(20);
line-height: rem-calc(24);
}
&:hover{
color: $orange;
}
}
}
.post-meta{
font-weight: 400;
font-size: rem-calc(14);
line-height: rem-calc(16);
letter-spacing: 0.05em;
@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 {
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);
}
}
&.has-img {
h1,
h2,
h3,
h4,
p,
ol,
ul {
color: #fff;
}
}
}