@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-content-overlap {
padding-top: 0;
padding-bottom: 0;
@include bp($sm) {
padding-top: rem-calc(60);
padding-bottom: rem-calc(60);
}
.heading {
@include fluid-type(28, 34);
}
&__content {
background-color: $white;
position: relative;
z-index: 2;
padding: rem-calc(20);
@include bp($lg) {
padding: rem-calc(60);
.block-content-overlap--disable & {
padding: 0;
}
}
.align-items-start & {
@include bp($lg) {
margin-top: rem-calc(-60);
}
}
.align-items-end & {
@include bp($lg) {
margin-bottom: rem-calc(-60);
}
}
}
.align-items-start {
@include bp($lg) {
margin-top: rem-calc(60);
}
}
.align-items-end {
@include bp($lg) {
margin-bottom: rem-calc(60);
}
}
&__copy {
p {
&:last-of-type {
margin-bottom: 0;
}
}
}
&__buttons {
margin-top: rem-calc(30);
}
&__image {
display: block;
img {
width: 100%;
}
}
&__video {
position: relative;
&:hover {
img {
transform: scale(1.3);
}
}
picture {
overflow: hidden;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba($darkBlue, 0.5);
}
}
img {
transition: transform 4s ease-out;
transform: scale(1.05);
}
&:hover {
img {
transform: scale(1.3);
}
&:after {
background-color: $lightBlue;
}
}
&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: rem-calc(72);
height: rem-calc(72);
background-color: $white;
border-radius: 50%;
background-image: url('#{$asset-path}/icons/icon-play.svg');
background-size: 25%;
background-repeat: no-repeat;
background-position: center;
transition: all 0.3s ease-out;
}
}
&__image-column {
@include bp($lg) {
margin-left: calc(2 / 12 * -100%);
.block-content-overlap--disable & {
margin-left: 0;
}
}
}
&__content-column {
.flex-row-reverse & {
@include bp($lg) {
margin-left: calc(2 / 12 * -100%);
.block-content-overlap--disable & {
margin-left: 0;
}
}
}
}
}
No notes.