<div class="slice-item" style="background-image: url('')" id="slice-item-">
<div class="slice-item__text container">
<h3 class="slice-item__text--header">
<span></span>
</h3>
<p class="slice-item__text--description">
</p>
<div class="slice-item__usps">
</div>
</div>
</div>
<div class="slice-item" style="background-image: url('{{ image }}')" id="slice-item-{{ number }}">
<div class="slice-item__text container">
<h3 class="slice-item__text--header">
<span>{{ title }}</span>
</h3>
<p class="slice-item__text--description">
{{ description }}
</p>
<div class="slice-item__usps">
</div>
</div>
</div>
/* No context defined for this component. */
.slice-item {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
grid-template-areas: "overflow";
&__usps {
display: none;
@include mq($screen-m) {
display: flex;
position: absolute;
height: 100vh;
top: 0;
right: 0;
width: 50%;
flex-direction: column;
justify-content: center;
grid-row-gap: 10rem;
}
&__text {
position: relative;
grid-area: overflow;
&--header {
font-weight: 300;
}
}
&--item {
width: 100%;
max-width: 400px;
position: relative;
height: auto;
box-sizing: border-box;
border: 0;
border-radius: 25px 0;
overflow: hidden;
transform: translateY(0);
animation: float 6s ease-in-out infinite;
padding: 25px;
background: rgba(255, 255, 255, 0.1);
.position-absolute {
left: 40px;
}
&:nth-child(even) {
margin-left: 0;
}
&:nth-child(odd) {
margin-left: 150px;
}
}
&--inner {
display: flex;
flex-direction: column;
}
}
&-image {
grid-area: overflow;
&__picture,
&__picture img {
object-fit: cover;
object-position: center;
height: 100%;
}
}
}
There are no notes for this item.