File: D:/HostingSpaces/SBogers10/farmfun.komma.pro/resources/sass/site/6-Organisms/_organisms.hero.scss
$o-hero-bp1: 456;
.o-hero {
position: relative;
.ie & {
background-image: url("/img/home/farmfun-020.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@include mq(500) {
background-image: url("/img/home/farmfun-025.jpg");
}
@include mq(600) {
background-image: url("/img/home/farmfun-050.jpg");
}
@include mq(1240) {
background-image: url("/img/home/farmfun-075.jpg");
}
}
}
.o-hero__main {
@include contain;
@include vspacing(
'padding-top' 1
);
}
.o-hero__image {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
object-fit: cover;
height: 100%;
max-height: 960px;
.ie & {
display: none;
}
}
.o-hero__video {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
object-fit: cover;
height: 100%;
max-height: 960px;
//overflow: hidden;
pointer-events: none;
.c-video {
position: absolute;
z-index: 1;
left: 0;
top: 50%;
transform: translateY(-50%);
max-width: none;
min-width: 1145px;
background-image: url("/img/hero-loader.jpg?v=2");
background-size: cover;
background-position: center;
&:before {
content: '';
z-index: 2;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: palette(secondary, 900);
opacity: 0.7;
}
}
.c-video__placeholder {
padding-bottom: calc(100% / 560 * 315);
background-color: transparent;
//&:before {
// content: '';
// z-index: 2;
// display: block;
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// background-color: palette(secondary, 900);
// opacity: 0.7;
//}
}
}
.o-hero__planner {
@include border-radius(s);
width: 100%;
padding: space(3);
background-color: palette(primary);
@include mq($o-hero-bp1) {
width: $site-column-size * 4px;
}
}
.o-hero__title {
@include font-family(secondary);
@include font-size(xl);
@include font-weight(regular);
color: palette(alt, 400);
margin-bottom: space(3);
@include mq($o-hero-bp1) {
@include font-size(xxl);
}
.o-hero__title-area & {
color: white;
@include mq(680, 1600) {
font-size: 2.3rem;
}
@include mq(1600) {
font-size: 3.2rem;
}
}
}
.o-hero__title-area {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
@include mq(1150) {
height: 30vw;
}
@include mq($max: 1150) {
padding-top: space(6);
padding-bottom: space(6);
}
.c-button__text {
margin-right: 10px;
}
}
.o-hero__rating {
margin-top: space(3);
@include mq(600) {
position: absolute;
right: 0;
bottom: 0;
}
}
.o-hero--main {
.o-hero__main {
padding-top: 0 !important;
}
.o-hero__rating {
}
}