<section class="big-picture-wrapper">
<div class="big-picture-background">
<div class="big-picture-background-dimmer" style="opacity: 0.6"></div>
<div class="big-picture-background-image" style="background-image: url('https://picsum.photos/1900/1200')"></div>
</div>
<div class="big-picture-inner full">
<div class="container">
<div class="label-title big-picture-label">lorem ipsum dolor</div>
<div class="big-picture-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.</div>
<a class="btn btn-primary" href="#lorem" target="_self">Mehr erfahren</a>
</div>
</div>
</section>
<section class="big-picture-wrapper">
<div class="big-picture-background">
{% if variant == 'full' %}
<div class="big-picture-background-dimmer" style="opacity: {{ dimmer_opacity }}"></div>
{% endif %}
{% if img_class %}
<div class="big-picture-background-image lazy-bg {{ img_class }}"></div>
{% else %}
<div class="big-picture-background-image" style="background-image: url('{{ media_src }}')"></div>
{% endif %}
</div>
<div class="big-picture-inner {{ variant }}">
<div class="container">
{% if variant == 'boxed' %}
<div class="content-box">
<div class="content-box-inner">
{% if label %}
<div class="label-title big-picture-label">{{ label }}</div>
{% endif %}
<h2 class="big-picture-title">{{ title }}</h2>
<div class="big-picture-text">{{ text }}</div>
{% if link_href %}
<a class="btn btn-primary" href="{{ link_href }}" target="{{ link_target }}">{{ link_text }}</a>
{% endif %}
</div>
</div>
{% endif %}
{% if variant == 'full' %}
{% if label %}
<div class="label-title big-picture-label">{{ label }}</div>
{% endif %}
<div class="big-picture-text">{{ text }}</div>
{% if link_href %}
<a class="btn btn-primary" href="{{ link_href }}" target="{{ link_target }}">{{ link_text }}</a>
{% endif %}
{% endif %}
</div>
</div>
</section>
{
"title": "Sed ut perspiciatis unde omnis iste natus",
"text": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.",
"media_src": "https://picsum.photos/1900/1200",
"img_class": "",
"link_href": "#lorem",
"link_text": "Mehr erfahren",
"link_target": "_self",
"dimmer_opacity": "0.6",
"variant": "full",
"label": "lorem ipsum dolor",
"media_type": "image"
}
.big-picture-wrapper {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
.big-picture-background {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
.big-picture-background-dimmer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: $dark-blue;
z-index: 2;
opacity: 0.6;
}
.big-picture-background-image {
height: 100%;
width: 100%;
position: relative;
z-index: 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
}
.big-picture-inner {
display: flex;
min-height: 100vh;
align-items: center;
align-items: flex-end;
@include media-breakpoint-up(sm) {
align-items: flex-start;
}
@include media-breakpoint-up(md) {
align-items: center;
min-height: 60vh;
}
&.boxed {
align-items: flex-end;
.container {
padding: 0;
@include media-breakpoint-up(md) {
padding-left: $grid-gutter-width / 2;
padding-right: $grid-gutter-width / 2;
}
}
.content-box {
padding: 3rem;
//width: 100%;
margin-left: -3rem;
margin-right: -3rem;
@include media-breakpoint-up(md) {
max-width: 60rem;
margin-left: 0;
margin-right: 0;
padding: 1rem 2rem 4rem 0;
}
position: relative;
&::before {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: $dark-blue;
opacity: 0.6;
width: 100%;
z-index: 0;
@include media-breakpoint-up(md) {
width: 3000px;
}
}
.content-box-inner {
position: relative;
z-index: 2;
}
.big-picture-text {
color: #fff;
@extend .text-base;
max-width: 60rem;
margin-bottom: 1.5rem;
}
}
}
&.full {
padding-top: 6rem;
padding-bottom: 6rem;
@include media-breakpoint-up(md) {
min-height: 60vh;
align-items: center;
padding-top: 12rem;
padding-bottom: 12rem;
}
.big-picture-text {
color: #fff;
@extend .title-medium;
max-width: 60rem;
margin-bottom: 1.5rem;
}
}
}
.container {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.big-picture-title {
color: #fff;
max-width: 60rem;
@extend .title-medium;
}
.big-picture-label {
color: $primary;
max-width: 60rem;
margin-bottom: 0.5rem;
&:empty {
display: none;
}
}
.btn {
margin-top: $space-b;
}
}
There are no notes for this item.