@import(once) '/apps/catalog/clientlibs/clientlib-base/css/variables.less';@import(once) '/apps/catalog/clientlibs/clientlib-base/css/mixins.less';@import(once) '/apps/catalog/clientlibs/clientlib-base/css/icon-variables.less';@import(once) '/apps/catalog/clientlibs/clientlib-base/css/mixins-text.less';.slider-hero-component{&--autoheight{.slider-hero-component{&__wrapper{height:100%;background:@neutral-900;.slider-hero-component__item{height:auto}
.banner-hero-content{height:100%;&-component{height:100%;&__container{height:100%}
}
&__picture{height:auto}
}
}
}
}
&__controls{display:flex}
.swiper-pagination{display:flex;justify-content:flex-start;padding:7px var(--grid-margin-xs);@media(min-width:768px){padding:0 var(--grid-margin-sm)}
@media(min-width:@bp-md){padding:0 var(--grid-margin-md)}
@media(min-width:1280px){padding:0}
}
.slider-hero-component__container{position:relative}
}
// CENTER DESIGN .slider-hero-item{.container{display:flex;flex-direction:column;justify-content:center;padding:32px 16px 92px;width:auto;height:540px;@media(min-width:@bp-md){padding:117px 439px;height:580px}
.slider-hero-item-left{position:relative !important;z-index:1 !important;&__subtitle{padding:51px 16px 0;@media(min-width:@bp-md){padding:32px 16px 0}
.cmp-text{p{overflow:hidden;text-align:center;.mixin-hdr-overline--large();color:@white}
p::before,p::after{content:"";position:relative;display:inline-block;width:50%;height:1px;vertical-align:middle;background-color:@white}
p::before{right:.5em;margin-left:-50%}
p::after{left:.5em;margin-right:-50%}
}
}
&__title{margin-top:16px;padding:0 8px 16px;@media(min-width:@bp-md){padding:32px 16px 0}
.cmp-title{&__text{.mixin-hdr-headline-h1--mobile();text-align:center;color:@white;@media(min-width:@bp-md){.mixin-hdr-headline-h1--desktop()}
}
}
}
&__text{padding:10px 32px;@media(min-width:@bp-md){padding:32px 16px 0}
.cmp-text{p{text-align:center;color:@white;.mixin-hdr-new-body--large--bold()}
}
}
&__buttons{display:flex;justify-content:space-around;margin-top:56px;padding-bottom:51px;@media(min-width:@bp-md){justify-content:center;gap:24px;padding:0 95px 32px}
.icon{position:relative;bottom:1px}
}
}
.slider-hero-item-right{position:absolute !important;inset:0;top:0;right:0;bottom:0;height:inherit;@media(min-width:@bp-md){height:fit-content}
&__transbox{position:absolute;display:inline;opacity:.4;width:100%;height:100%;background-color:black}
&__image{visibility:visible;.cmp-image{&__image{height:540px;object-fit:cover;@media(min-width:@bp-md){height:auto;max-height:580px}
}
}
}
&__star{display:none}
&__sidetext{display:none}
}
}
}
// LEFT DESIGN .image-left{.slider-hero-item{background:linear-gradient(270deg,#FF3434 15.69%,#A12222 97.37%);.container{display:flex;flex-direction:column;padding:24px 16px;width:auto;height:auto;@media(min-width:@bp-md){flex-direction:row;flex-flow:row-reverse;padding:0 165px;height:590px}
.slider-hero-item-left{@media(min-width:@bp-md){margin:133px 0;width:481px;height:592px;&__subtitle{display:flex;justify-content:center;align-items:center;margin-bottom:32px;margin-left:-12px;padding:0 !important;.cmp-text{margin:0 15px;p{color:@white;.mixin-hdr-overline--large()}
}
&::after{content:'';flex:1;opacity:.2;margin-top:-5px;height:1px;background:@white}
}
&__title{margin-bottom:32px;padding:0 !important;.cmp-title{&__text{text-align:left !important;color:@white;.mixin-hdr-headline-h1--desktop()}
}
}
&__text{margin-bottom:45px;padding:0 !important;.cmp-text{p{text-align:left !important;color:@white;.mixin-hdr-new-body--large--bold() !important}
}
}
&__buttons{position:absolute;display:flex;justify-content:flex-start !important;margin-top:0 !important;@media(min-width:@bp-md){padding:0}
}
}
&__subtitle{padding:0 24px;.cmp-text{p{overflow:hidden;text-align:center;.mixin-hdr-overline--large();color:@white}
p::before,p::after{content:"";position:relative;display:inline-block;width:50%;height:1px;vertical-align:middle;background-color:@white}
p::before{right:.5em;margin-left:-50%}
p::after{left:.5em;margin-right:-50%}
}
}
&__title{margin-top:16px;padding:0 24px;.cmp-title{&__text{.mixin-hdr-headline-h3--desktop();text-align:center;color:@white;@media(min-width:@bp-md){.mixin-hdr-headline-h1--desktop()}
}
}
}
&__text{margin-top:16px;padding:0 24px;.cmp-text{p{text-align:center;color:@white;.mixin-hdr-new-body--medium()}
}
}
&__buttons{display:flex;justify-content:space-between;margin-top:20px;margin-bottom:24px;.icon{position:relative;bottom:1px}
}
}
.slider-hero-item-right{position:static !important;display:inline;@media(min-width:@bp-md){display:grid;justify-content:center;width:629px;height:592px}
&__transbox{display:none}
&__image{@media(min-width:@bp-md){margin:105px 43px 10px;width:424px;height:409px}
.cmp-image{&__image{height:auto;object-fit:fill;@media(min-width:@bp-md){position:sticky;z-index:1;max-height:fit-content}
}
}
}
&__star{display:none;@media(min-width:@bp-md){position:sticky;bottom:-25px;display:inline;border-right:solid 260px transparent;border-bottom:solid 480px @white;border-left:solid 260px transparent;&::after{content:'';position:absolute;top:160px;left:-260px;border-top:solid 480px @white;border-right:solid 260px transparent;border-left:solid 260px transparent}
}
}
&__sidetext{position:absolute;bottom:210px;// left:240px;display:none;writing-mode:vertical-lr;rotate:-180deg;@media(min-width:@bp-md){display:flex;.cmp-text{p{text-align:center;color:@white;.mixin-hdr-overline--medium()}
}
}
}
}
}
}
.slider-hero-component{&__controls{display:flex}
}
}
// RIGHT DESIGN .image-right{.slider-hero-item{background:linear-gradient(270deg,#FF3434 15.69%,#A12222 97.37%);.container{display:flex;flex-direction:column;padding:24px 16px;width:auto;height:auto;@media(min-width:@bp-md){flex-direction:row;padding:0 165px;height:590px}
.slider-hero-item-left{@media(min-width:@bp-md){margin:133px 0;width:481px;height:592px;&__subtitle{display:flex;justify-content:center;align-items:center;margin-bottom:32px;margin-left:-12px;padding:0 !important;.cmp-text{margin:0 15px;p{color:@white;.mixin-hdr-overline--large()}
}
&::after{content:'';flex:1;opacity:.2;margin-top:-5px;height:1px;background:@white}
}
&__title{margin-bottom:32px;padding:0 !important;.cmp-title{&__text{text-align:left !important;color:@white;.mixin-hdr-headline-h1--desktop()}
}
}
&__text{margin-bottom:45px;padding:0 !important;.cmp-text{p{text-align:left !important;color:@white;.mixin-hdr-new-body--large--bold() !important}
}
}
&__buttons{position:absolute;display:flex;justify-content:flex-start !important;margin-top:0 !important;@media(min-width:@bp-md){padding:0}
}
}
&__subtitle{padding:0 24px;.cmp-text{p{overflow:hidden;text-align:center;.mixin-hdr-overline--large();color:@white}
p::before,p::after{content:"";position:relative;display:inline-block;width:50%;height:1px;vertical-align:middle;background-color:@white}
p::before{right:.5em;margin-left:-50%}
p::after{left:.5em;margin-right:-50%}
}
}
&__title{margin-top:16px;padding:0 24px;.cmp-title{&__text{.mixin-hdr-headline-h3--desktop();text-align:center;color:@white;@media(min-width:@bp-md){.mixin-hdr-headline-h1--desktop()}
}
}
}
&__text{margin-top:16px;padding:0 24px;.cmp-text{p{text-align:center;color:@white;.mixin-hdr-new-body--medium()}
}
}
&__buttons{display:flex;justify-content:space-between;margin-top:20px;margin-bottom:24px;.icon{position:relative;bottom:1px}
}
}
.slider-hero-item-right{position:static !important;display:inline;@media(min-width:@bp-md){width:629px;height:592px}
&__transbox{display:none}
&__image{@media(min-width:@bp-md){margin:110px 83px 10px;width:424px;height:409px}
.cmp-image{&__image{height:auto;object-fit:fill;@media(min-width:@bp-md){position:sticky;z-index:1;max-height:fit-content}
}
}
}
&__star{display:none;@media(min-width:@bp-md){position:sticky;right:244px;bottom:-95px;display:inline;border-right:solid 300px transparent;border-bottom:solid 550px @white;border-left:solid 300px transparent;&::after{content:'';position:absolute;top:160px;left:-260px;border-top:solid 480px @white;border-right:solid 260px transparent;border-left:solid 260px transparent}
}
}
&__sidetext{position:absolute;bottom:210px;display:none;writing-mode:vertical-lr;rotate:-180deg;@media(min-width:@bp-md){display:inline;.cmp-text{p{text-align:center;color:@white;.mixin-hdr-overline--medium()}
}
}
}
}
}
}
.slider-hero-component{&__controls{display:flex}
}
}
// A U T H O R S T Y L E S .slider-hero-component__wrapper:has(.isAuthor){height:660px;.banner-hero-content{height:660px;&-component{height:660px}
}
}