/* BOX UNIT - QUOTE
01 GENERAL
02 ICON
03 TEXT
*/
/* -----------------------------------------------------------------------
01 GENERAL
/* ---------------------------------------------------------------------*/
.wfbb_quote .paragraph,
.wfbb_text_optional_icon_link .paragraph {
background-color: var(--color-primary);
border-radius: var(--border-radius);
display: grid;
grid-gap: var(--grid-gap);
grid-template-columns: var(--grid-columns);
padding: var(--section-inner-side-padding);
}
@media (max-width: 767px) {
.wfbb_quote .paragraph, .wfbb_text_optional_icon_link .paragraph {
padding: calc(var(--section-inner-side-padding) * 2);
}
}
/* -----------------------------------------------------------------------
02 ICON
/* ---------------------------------------------------------------------*/
.wfbb_quote .field--name-field-icon-wfbb-quote,
.wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic {
grid-column: 2 / 4;;
padding-right: 5rem;
}
.wfbb_quote .group-text-wfbb-quote {
position: relative;
}
.wfbb_quote .group-text-wfbb-quote:before {
display: block;
content: '';
height: 5rem;
width: 5rem;
position: absolute;
top: 0;
left: calc(var(--grid-gap) * -1 - 5rem);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61.516' height='51.834' viewBox='0 0 61.516 51.834'%3E%3Cg id='Gruppe_21' data-name='Gruppe 21' transform='translate(-200.456 -140.113)'%3E%3Crect id='Rechteck_64' data-name='Rechteck 64' width='14' height='50' rx='7' transform='translate(216.734 140.113) rotate(19)' fill='%23fff'/%3E%3Crect id='Rechteck_65' data-name='Rechteck 65' width='14' height='50' rx='7' transform='translate(248.734 140.113) rotate(19)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: top right;
background-size: 100%;
}
@media (max-width: 1400px) {
.wfbb_quote .group-text-wfbb-quote:before {
width: 4rem;
height: 4rem;
}
}
@media (max-width: 767px) {
.wfbb_quote .field--name-field-icon-wfbb-quote, .wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic {
grid-column: 1 / 9;
height: 8rem;
}
.wfbb_quote .field--name-field-icon-wfbb-quote div, .wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic div {
height: 100%;
}
.wfbb_quote .field--name-field-icon-wfbb-quote img, .wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic img {
height: 100%;
object-fit: contain;
width: auto;
}
.wfbb_quote .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link {
grid-column: 2 / 13;
}
.wfbb_quote .group-text-wfbb-quote:before {
width: 2rem;
height: 2rem;
left: calc(var(--grid-gap) * -1 - 2rem);
}
}
/* -----------------------------------------------------------------------
03 TEXT
/* ---------------------------------------------------------------------*/
.wfbb_quote .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link {
color: #fff;
grid-column: 3 / 11;
}
.wfbb_quote .field--name-field-icon-wfbb-quote + .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic + .group-text-wfbb-text-optional-icon-link {
grid-column: 4 / 11;
}
.wfbb_quote .field--name-field-footer-wfbb-quote {
font-size: 1rem;
margin-top: 1rem;
}
@media (max-width: 991px) {
.wfbb_quote .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link {
grid-column: 3 / 13;
}
}
@media (max-width: 767px) {
.wfbb_quote .paragraph, .wfbb_text_optional_icon_link .paragraph {
padding: calc(var(--section-inner-side-padding) * 2);
}
.wfbb_quote .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link,
.wfbb_quote .field--name-field-icon-wfbb-quote + .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic + .group-text-wfbb-text-optional-icon-link {
grid-column: span 12;
}
}
@media (max-width: 500px) {
.wfbb_quote .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link {
grid-column: 2 / 13;
}
}
/* -----------------------------------------------------------------------
04 BUTTON
/* ---------------------------------------------------------------------*/
.wfbb_text_optional_icon_link .btn-wfbb {
border-color: #fff;
color: #fff;
}
.wfbb_text_optional_icon_link .btn-wfbb:after {
background-image: var(--arrow-next-white);
}
.wfbb_text_optional_icon_link .btn-wfbb:hover {
background: #fff;
color: var(--color-primary);
}
.wfbb_text_optional_icon_link .btn-wfbb:hover:after {
background-image: var(--arrow-next-primary);
}
/* -----------------------------------------------------------------------
05 IMAGE
/* ---------------------------------------------------------------------*/
.field--name-field-wfbb-boxen {
display: grid;
grid-template-columns: var(--grid-columns);
grid-column-gap: var(--grid-gap);
}
.field--name-field-wfbb-boxen > .field__item {
border-radius: var(--border-radius);
box-shadow: 0 15px 30px rgb(0 0 0 / 15%);
padding: var(--page-gap) var(--section-inner-side-padding);
grid-column: span 6;
}
.paragraph--type--wfbb-box-element-logo-text-link {
display: flex;
}
.field--name-field-icon-logo-image-box-elemen {
width: 30%;
}
.field--name-field-icon-logo-image-box-elemen > div {
position: relative;
}
.paragraph--type--wfbb-box-element-logo-text-link p {
font-size: 1.5rem;
}
.paragraph--type--wfbb-box-element-logo-text-link .btn-wfbb {
margin-top: 1rem;
}
.paragraph--type--wfbb-box-element-logo-text-link > div:last-child {
padding-left: 2rem;
width: 70%;
}
@media (max-width: 991px) {
.paragraph--type--wfbb-box-element-logo-text-link {
flex-direction: column;
align-items: center;
}
.field--name-field-icon-logo-image-box-elemen {
width: 70%;
margin-bottom: var(--grid-gap);
}
.paragraph--type--wfbb-box-element-logo-text-link > div:last-child {
text-align: center;
padding: 0;
width: 100%;
}
}
@media (max-width: 767px) {
.field--name-field-wfbb-boxen {
grid-row-gap: var(--grid-gap);
}
.field--name-field-wfbb-boxen > .field__item {
box-shadow: 0 7px 15px rgb(0 0 0 / 15%);
grid-column: span 12;
padding: var(--page-gap)var(--grid-gap);
}
}
