<div class="usp-key">
<div class="usp-key__inner">
<div class="usp-key__items">
<div class="usp-key__item">
<div class="usp-snippet">
<div class="usp-snippet__content">
<p class="usp-snippet__title heading heading--7">Feature 1 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
</div>
<div class="usp-snippet__links">
<a href="#" class="link link--underlined">
<span class="link__label">Learn more</span>
</a>
</div>
</div>
</div>
<div class="usp-key__item">
<div class="usp-snippet">
<div class="usp-snippet__content">
<p class="usp-snippet__title heading heading--7">Feature 2 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
</div>
<div class="usp-snippet__links">
<a href="#" class="link link--underlined">
<span class="link__label">Learn more</span>
</a>
</div>
</div>
</div>
<div class="usp-key__item">
<div class="usp-snippet">
<div class="usp-snippet__content">
<p class="usp-snippet__title heading heading--7">Feature 3 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
</div>
<div class="usp-snippet__links">
<a href="#" class="link link--underlined">
<span class="link__label">Learn more</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="usp-key{{#if modifier}} usp-key--{{ modifier }}{{/if}}">
<div class="usp-key__inner">
{{#if visual }}
<div class="usp-key__visual">
<div class="usp-key__visual__inner">
{{render '@visual' visual merge=true }}
</div>
</div>
{{/if }}
<div class="usp-key__items">
{{#each usps}}
<div class="usp-key__item">
{{render '@usp-snippet' this }}
</div>
{{/each}}
</div>
</div>
</div>
visual: null
modifier: ''
usps:
- modifier: ''
title: >-
Feature 1 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
actions:
- url: '#'
modifier: underlined
label: Learn more
- modifier: ''
title: >-
Feature 2 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
actions:
- url: '#'
modifier: underlined
label: Learn more
- modifier: ''
title: >-
Feature 3 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
actions:
- url: '#'
modifier: underlined
label: Learn more
.usp-key {
--usp-key-width: 100%;
--usp-key-gap: var(--gap--4);
--usp-key-offset: calc((100vw - var(--section--8)) / 2);
padding: var(--gap--3) 0;
overflow: hidden;
// section--8
display: block;
flex: 1 1 auto;
max-width: 1140px;
margin-right: auto;
margin-left: auto;
width: 100%;
&__inner {
display: flex;
flex-flow: column;
}
&__items {
display: flex;
flex-flow: column;
flex-shrink: 0;
}
&__item {
// padding: 0 var(--gap--4);
.usp-snippet {
border-bottom: var(--divider);
}
&:last-child {
.usp-snippet {
border-bottom: none;
}
}
}
&__visual {
width: 100%;
&__inner {
height: 0;
position: relative;
padding-top: 73.58%;
width: 100%;
}
}
.usp-snippet {
padding-top: var(--gap--3);
padding-bottom: var(--gap--3);
text-align: left;
}
&--visual, &--visual-reversed {
.usp-key {
&__items {
width: var(--usp-key-width);
}
}
}
@media screen and (min-width: 768px) {
&__items {
flex-flow: row wrap;
}
&__item {
width: 33.33%;
}
&:not(.usp-key--visual):not(.usp-key--visual-reversed) {
.usp-key__items {
margin-left: calc(var(--usp-key-gap) * -1);
margin-right: calc(var(--usp-key-gap) * -1);
}
.usp-key__item {
padding-left: var(--usp-key-gap);
padding-right: var(--usp-key-gap);
.usp-snippet {
border-bottom: none;
}
}
}
&--visual, &--visual-reversed {
.usp-key {
&__inner {
align-items: center;
}
&__item {
width: 50%;
&:nth-child(2n) {
padding-left: var(--usp-key-gap);
}
&:nth-child(2n + 1) {
padding-right: var(--usp-key-gap);
}
&:nth-child(3) {
.usp-snippet {
border-bottom: none;
}
}
}
}
.usp-snippet {
padding-top: var(--gap--9);
padding-bottom: var(--gap--9);
}
}
}
@media screen and (min-width: 1024px) {
--usp-key-width: calc(66.66% + var(--gap--1));
&--visual, &--visual-reversed {
.usp-key {
&__inner {
display: flex;
flex-flow: row nowrap;
}
&__visual {
height: 0;
position: relative;
&__inner {
right: 0;
position: absolute;
top: 0;
transform: translateY(-50%);
}
}
}
}
&--visual {
.usp-key {
&__visual {
margin-right: var(--usp-key-gap);
}
&__items {
padding-left: var(--usp-key-gap);
}
}
}
&--visual-reversed {
.usp-key {
&__visual {
order: 2;
margin-left: var(--usp-key-gap);
}
&__items {
padding-right: var(--usp-key-gap);
}
}
}
}
@media screen and (min-width: 1140px) {
overflow: initial;
&--visual {
.usp-key {
&__visual {
margin-left: calc(var(--usp-key-offset) * -1);
}
}
}
&--visual-reversed {
.usp-key {
&__visual {
margin-right: calc(var(--usp-key-offset) * -1);
}
}
}
}
@media screen and (min-width: 1440px) {
--usp-key-offset: calc((var(--section--9) - var(--section--8)) / 2);
&--visual, &--visual-reversed {
.usp-key {
&__visual {
width: calc(100% - var(--usp-key-width) - var(--usp-key-gap) + var(--usp-key-offset));
}
}
}
}
}
No notes defined.