.swiper {
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
    overflow: hidden;
}
.swiper-wrapper {
    z-index: 1;
    width: 100%;
    height: 100%;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
    display: flex;
    position: relative;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate(0, 0);
}
.swiper-horizontal {
    touch-action: pan-y;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    transition-property: transform;
    display: block;
    position: relative;
}
.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0);
}
.swiper-lazy-preloader {
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-top-color: #0000;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    margin-left: -21px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.onecore-picture {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.onecore-picture:after {
    content: attr(data-recommend);
    color: #31343c;
    background-color: #eee;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 36px;
    font-weight: 700;
    display: none;
    position: absolute;
    top: 0;
}
@media screen and (width<=1024px) {
    .onecore-picture:after {
        font-size: 24px;
    }
}
@media screen and (width<=743px) {
    .onecore-picture:after {
        font-size: 16px;
        font-weight: 600;
    }
}
.maintenance {
    z-index: 99999;
    position: relative;
}
.maintenance .maintenance-message {
    opacity: 0;
    z-index: 99;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #efefef;
    align-items: center;
    width: 100%;
    padding: 18px 24px;
    transition: all 1s ease-in-out;
    display: flex;
    position: fixed;
    top: -500px;
    left: 0;
}
.maintenance .maintenance-message.active.tablet,
.maintenance .maintenance-message.active.mobile {
    display: none;
}
.maintenance .maintenance-message.active.desktop {
    opacity: 1;
    display: flex;
    top: 0;
}
.maintenance .maintenance-message.active.desktop:not(.fixed) {
    position: relative;
}
.maintenance .maintenance-message.position-Bottom {
    top: auto;
    bottom: -500px;
}
.maintenance .maintenance-message.position-Bottom.active {
    opacity: 1;
    bottom: 0;
}
.maintenance .maintenance-message p {
    color: #747474;
    margin: 6px 0 0;
    font-size: 12px;
}
@media screen and (width<=1112px) {
    .maintenance .maintenance-message.active.desktop,
    .maintenance .maintenance-message.active.mobile {
        display: none;
    }
    .maintenance .maintenance-message.active.tablet {
        opacity: 1;
        display: flex;
        top: 0;
    }
    .maintenance .maintenance-message.active.tablet:not(.fixed) {
        position: relative;
    }
}
@media screen and (device-width<=743px) {
    .maintenance .maintenance-message.active.desktop,
    .maintenance .maintenance-message.active.tablet {
        display: none;
    }
    .maintenance .maintenance-message.active.mobile {
        opacity: 1;
        display: flex;
        top: 0;
    }
    .maintenance .maintenance-message.active.mobile:not(.fixed) {
        position: relative;
    }
}
@media screen and (width<=420px) {
    .maintenance .maintenance-message {
        padding: 12px;
    }
}
:root {
    --theme-color-1: #7dd8ca;
    --theme-color-2: #ffcb47;
    --theme-color-3: #4d4d5a;
    --theme-color-4: #82c9d3;
    --theme-color-neutral-01: #d0e2e2;
    --theme-color-neutral-04: #e7f3f3;
    --theme-color-1-light-90: #f2fbfa;
    --theme-color-1-light-70: #d8f3ef;
    --theme-color-1-light-40: #b1e8df;
    --theme-color-1-black-10: #71c2b6;
    --theme-color-2-light-60: #ffeab5;
    --theme-color-2-black-10: #e6b740;
    --theme-color-3-light-95: #f6f6f7;
    --theme-color-3-light-80: #dbdbde;
    --theme-color-3-light-60: #b8b8bd;
    --theme-color-3-light-50: #a6a6ac;
    --theme-color-3-light-40: #94949c;
    --theme-color-3-light-30: #82828b;
    --theme-color-3-black-20: #3e3e48;
    --theme-color-error: #8d1321;
    --skylar-green-gradient: linear-gradient(90deg, #80bcc6 0%, #7dd5c7 100%);
    --skylar-licht-gradient: linear-gradient(90deg, #7dd5c700 0%, #80bcc6 100%);
    --radius-radius: 4px;
    --radius-radius-sm: 8px;
    --radius-radius-md: 12px;
    --radius-radius-lg: 24px;
    --radius-radius-xl: 45px;
}
.shop-notification-banner {
    --h-banner: 64px;
    --w-banner: 328px;
    --m-t-banner: 100px;
    --m-w-c: 224px;
    --pd-t-b: 20px;
    max-width: var(--w-banner);
    transform-origin: 100%;
    margin-top: var(--m-t-banner);
    border-radius: 0 0 8px 8px;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    top: 50%;
    right: 31px;
    overflow: hidden;
    transform: rotate(90deg);
    box-shadow: 0 6px 40px 10px #4d4d5a26;
}
.shop-notification-banner .maintenance-message {
    background-color: var(--theme-color-1);
    border-bottom: none;
    padding: 0;
}
.shop-notification-banner .maintenance-message .message-container {
    height: var(--h-banner);
}
.shop-notification-banner .maintenance-message .box {
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
}
.shop-notification-banner .maintenance-message p,
.shop-notification-banner .maintenance-message span,
.shop-notification-banner .maintenance-message a {
    color: var(--theme-color-3);
    text-align: center;
    margin: 0;
}
.shop-notification-banner .maintenance-message a {
    padding: var(--pd-t-b) 50px;
}
.shop-notification-banner .maintenance-message p {
    max-width: var(--m-w-c);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
    overflow: clip visible;
}
@media screen and (width<=1200px) {
    .shop-notification-banner {
        --h-banner: 48px;
        --m-t-banner: 0px;
        --pd-t-b: 14px;
        transform-origin: unset;
        right: unset;
        top: unset;
        border-radius: 8px 8px 0 0;
        justify-content: center;
        align-items: center;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
    }
}
.title-lg {
    font-size: var(--title-lg, 28px);
    line-height: var(--title-line-height-lg, 33px);
}
.title-sm {
    font-size: var(--title-sm, 22px);
    line-height: var(--title-line-height-sm, 26px);
}
.title-xs {
    font-size: var(--title-xs, 17px);
    line-height: var(--title-line-height-xs, 20px);
}
.text-xl {
    font-size: var(--text-xl, 18px);
    line-height: var(--line-height-text-xl, 22px);
}
.text-md {
    font-size: var(--text-md, 14px);
    line-height: var(--line-height-text-md, 26px);
}
.text-sm {
    font-size: var(--text-sm, 12px);
    line-height: var(--line-height-text-sm, 18px);
}
.text-xs {
    font-size: var(--text-xs, 10px);
    line-height: var(--line-height-text-xs, 14px);
}
.header-1,
.header-2,
.header-4,
.header-5 {
    font-family: Panton;
    font-weight: 800;
}
.header-1 {
    font-size: var(--header-1, 50px);
    line-height: var(--line-height-header-1, 60px);
}
.header-2 {
    font-size: var(--header-2, 40px);
    line-height: var(--line-height-header-2, 50px);
}
.header-3 {
    font-size: var(--header-3, 26px);
    line-height: var(--line-height-header-3, 30px);
    margin-left: -1ch;
    padding-left: 1ch;
    font-family: Market Pro;
    font-weight: 500;
}
.header-4 {
    font-size: var(--header-4, 32px);
    line-height: var(--line-height-header-4, 38px);
}
.header-5 {
    font-size: var(--header-5, 22px);
    line-height: var(--line-height-header-5, 27px);
}
@media screen and (width<=1200px) {
    .header-1 {
        font-size: var(--header-1, 40px);
        line-height: var(--line-height-header-1, 48px);
    }
    .header-2 {
        font-size: var(--header-2, 35px);
        line-height: var(--line-height-header-2, 44px);
    }
    .header-3 {
        font-size: var(--header-3, 26px);
        line-height: var(--line-height-header-3, 30px);
    }
    .header-4 {
        font-size: var(--header-4, 28px);
        line-height: var(--line-height-header-4, 32px);
    }
    .header-5 {
        font-size: var(--header-5, 20px);
        line-height: var(--line-height-header-5, 25px);
    }
    .title-lg {
        font-size: var(--title-lg, 26px);
        line-height: var(--title-line-height-lg, 30px);
    }
    .title-sm {
        font-size: var(--title-sm, 20px);
        line-height: var(--title-line-height-sm, 24px);
    }
    .title-xs {
        font-size: var(--title-xs, 17px);
        line-height: var(--title-line-height-xs, 20px);
    }
    .text-xl {
        font-size: var(--text-xl, 18px);
        line-height: var(--line-height-text-xl, 22px);
    }
    .text-md {
        font-size: var(--text-md, 14px);
        line-height: var(--line-height-text-md, 26px);
    }
    .text-sm {
        font-size: var(--text-sm, 12px);
        line-height: var(--line-height-text-sm, 18px);
    }
    .text-xs {
        font-size: var(--text-xs, 10px);
        line-height: var(--line-height-text-xs, 14px);
    }
}
@media screen and (width<=743px) {
    .header-1 {
        font-size: var(--header-1, 32px);
        line-height: var(--line-height-header-1, 38px);
    }
    .header-2 {
        font-size: var(--header-2, 28px);
        line-height: var(--line-height-header-2, 35px);
    }
    .header-3 {
        font-size: var(--header-3, 20px);
        line-height: var(--line-height-header-3, 24px);
    }
    .header-4 {
        font-size: var(--header-4, 26px);
        line-height: var(--line-height-header-4, 30px);
    }
    .header-5 {
        font-size: var(--header-5, 18px);
        line-height: var(--line-height-header-5, 22px);
    }
    .title-lg {
        font-size: var(--title-lg, 24px);
        line-height: var(--title-line-height-lg, 28px);
    }
    .title-sm {
        font-size: var(--title-sm, 18px);
        line-height: var(--title-line-height-sm, 21px);
    }
    .title-xs {
        font-size: var(--title-xs, 15px);
        line-height: var(--title-line-height-xs, 19px);
    }
    .text-xl {
        font-size: var(--text-xl, 16px);
        line-height: var(--line-height-text-xl, 19px);
    }
    .text-md {
        font-size: var(--text-md, 14px);
        line-height: var(--line-height-text-md, 26px);
    }
    .text-sm {
        font-size: var(--text-sm, 12px);
        line-height: var(--line-height-text-sm, 18px);
    }
    .text-xs {
        font-size: var(--text-xs, 10px);
        line-height: var(--line-height-text-xs, 14px);
    }
}
*,
:before,
:after {
    box-sizing: border-box;
}
body,
html {
    margin: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    color: var(--theme-color-3);
    background-color: #fff;
    font-family: Panton, sans-serif;
    font-style: normal;
    overflow-y: auto;
}
main,
section,
p,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: unset;
    font-weight: unset;
    margin: 0;
    padding: 0;
}
a {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    outline: none;
    font-weight: 800;
    text-decoration: none;
}
ul li {
    list-style: none;
}
input,
select,
textarea {
    width: 100%;
    font-family: Verdana;
    font-size: inherit;
    border: none;
    outline: 0;
}
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    scrollbar-color: transparent transparent;
    background-color: #0000;
    display: none;
}
main {
    min-height: calc(100vh - (var(--header-height, 0) + var(--footer-height, 0) + var(--shop-notification-height, 0)));
    margin-top: calc(var(--header-height) + var(--shop-notification-height));
    background-image: url(/assetfiles/img/skylar/svgs/watermark.svg#watermark);
    background-repeat: repeat-y;
    background-size: 100vw;
    font-family: Verdana;
    overflow: hidden;
}
.body:has(.shop-notification-banner) {
    --header-height: 188px;
    --shop-notification-height: 0px;
}
@media screen and (width<=743px) {
    .body:has(.shop-notification-banner) {
        --header-height: 152px;
    }
}
.container {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 124px;
    position: relative;
}
.hidden {
    display: none !important;
}
video,
iframe {
    border: none;
    max-width: 100%;
}
img,
picture,
canvas {
    block-size: auto;
    max-inline-size: 100%;
    display: block;
}
.text-right {
    text-align: right;
}
.text-truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: clip visible;
}
.verdana-txt {
    font-family: Verdana;
    font-weight: 400;
}
.verdana-bold-txt {
    font-family: Verdana;
    font-weight: 800;
}
.panton-txt {
    font-family: Panton;
    font-weight: 800;
}
.component-section {
    margin-bottom: 80px;
}
.description a {
    color: var(--theme-color-1);
    font-weight: unset;
}
@media screen and (width<=1440px) {
    .container {
        padding: 0 64px;
    }
}
@media screen and (width<=1200px) {
    .container {
        padding: 0 32px;
    }
    .component-section {
        margin-bottom: 64px;
    }
}
@media screen and (width<=743px) {
    .container {
        padding: 0 16px;
    }
    .component-section {
        margin-bottom: 40px;
    }
}
button {
    all: unset;
    cursor: pointer;
    appearance: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
.bt {
    --max-width: 462px;
    --min-width: 245px;
    --width: 100%;
    --height: 64px;
    appearance: none;
    border-radius: var(--radius-radius-sm);
    border: none;
    outline: none;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: fit-content;
    padding: 8px 16px;
    font-style: normal;
    transition: background-color 0.3s;
    display: inline-flex;
    overflow: hidden;
}
.bt .bt-txt {
    max-height: 100%;
}
.bt .bt-txt.txt-link {
    color: var(--theme-color-1);
}
.bt .bt-icon {
    flex-shrink: 0;
}
.bt.bt-primary {
    min-width: var(--min-width);
    max-width: var(--max-width);
    height: var(--height);
    width: var(--width);
    background-color: var(--theme-color-1);
}
.bt.bt-primary .bt-txt {
    color: var(--theme-color-3);
}
.bt.bt-secondary {
    min-width: var(--min-width);
    max-width: var(--max-width);
    height: var(--height);
    width: var(--width);
    background-color: var(--theme-color-2);
}
.bt.bt-secondary .bt-txt {
    color: var(--theme-color-3);
}
.bt.bt-tertiary {
    min-width: var(--min-width);
    max-width: var(--max-width);
    height: var(--height);
    width: var(--width);
    background-color: var(--theme-color-3);
}
.bt.bt-tertiary .bt-txt {
    color: #fff;
}
.bt.bt-tertiary:disabled {
    cursor: default;
    background-color: var(--theme-color-3-light-60);
}
@media screen and (width<=1200px) {
    .bt {
        --max-width: 324px;
        --min-width: 268px;
        --height: 64px;
    }
}
@media screen and (width<=743px) {
    .bt {
        --max-width: 328px;
        --min-width: 252px;
        --height: 56px;
    }
}
.icon {
    display: inline-block;
}
.icon.center {
    justify-content: center;
    align-items: center;
    display: flex;
}
.ico-sm {
    width: 16px;
    height: 16px;
}
.ico-md {
    width: 24px;
    height: 24px;
}
.ico-lg {
    width: 32px;
    height: 32px;
}
.ico-xxl {
    width: 56px;
    height: 56px;
}
.ico-chevron.down {
    transform: scaleY(-1);
}
.ico-chevron.left {
    transform: rotate(-90deg);
}
.ico-chevron.right {
    transform: rotate(90deg);
}
.custom-scroll {
    position: relative;
}
.custom-scroll.disable:after {
    opacity: 0;
}
.custom-scroll.disable .wrapper,
.custom-scroll.disable .content {
    overflow: hidden;
}
.custom-scroll:after,
.custom-scroll .track {
    content: "";
    opacity: 1;
    background-color: #f9f9f9;
    border-radius: 2px;
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 1px;
}
.custom-scroll .wrapper {
    opacity: 1;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    overflow: hidden scroll;
}
.custom-scroll .content {
    overflow: hidden auto;
}
.header {
    z-index: 10;
    background-color: #fff;
    width: 100%;
    transition: all 0.3s ease-in-out;
    position: fixed;
    top: 0;
    box-shadow: 0 10px 40px #0000001a;
}
.header .btn-wrapper {
    margin-left: 16px;
    position: relative;
}
.header .btn-wrapper .account-wrapper {
    flex-direction: column;
    align-items: flex-end;
    display: flex;
    position: relative;
}
.header .btn-wrapper .account-wrapper .account-btn {
    z-index: 2;
    position: relative;
}
.header .btn-wrapper .account-wrapper .account-btn .logged-in-image {
    color: #333;
    text-transform: uppercase;
    background: #e1e1e1;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-weight: 600;
    display: flex;
    overflow: hidden;
}
.header .btn-wrapper .account-wrapper .account-btn .logged-in-image.hidden {
    display: none;
}
.header .btn-wrapper .account-wrapper .account-dropdown {
    border-radius: var(--radius-radius);
    z-index: 1;
    background: #fff;
    flex-direction: column;
    gap: 4px;
    width: max-content;
    padding: 4px;
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    box-shadow: 0 0 16px #111c1c29;
}
.header .btn-wrapper .account-wrapper .account-dropdown .dropdown-option {
    border-radius: var(--radius-radius);
    cursor: pointer;
    background: #fff;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 6px 8px;
    transition: background-color 0.15s;
    display: flex;
}
.header .btn-wrapper .account-wrapper .account-dropdown .dropdown-option .icon {
    width: 24px;
    height: 24px;
}
.header .main-header {
    --padding: 32px;
    z-index: 1;
    width: 100%;
    padding: 24px 0;
    position: relative;
}
.header .main-header .boxes {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(6, 1fr);
    justify-content: space-between;
    align-items: center;
    row-gap: 24px;
    display: grid;
}
.header .main-header .boxes:after {
    content: "";
    background-color: var(--theme-color-3-light-60);
    width: 100vw;
    height: 0.25px;
    transition: width 0.5s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}
.header .main-header .boxes .logo-trustpilot-wrapper {
    grid-area: 1/1/2/4;
    align-items: center;
    gap: 56px;
    display: flex;
}
.header .main-header .boxes .logo-trustpilot-wrapper .logo {
    flex-shrink: 0;
    display: flex;
}
.header .main-header .boxes .logo-trustpilot-wrapper .logo img,
.header .main-header .boxes .logo-trustpilot-wrapper .logo .icon-logo-primary {
    width: 179px;
    height: 58px;
}
.header .main-header .boxes .logo-trustpilot-wrapper .trustpilot {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.header .main-header .boxes .logo-trustpilot-wrapper .trustpilot .trustpilot-widget {
    width: 100%;
    max-width: 300px;
}
.header .main-header .boxes .search-wrapper {
    grid-area: 1/5/2/6;
    justify-content: flex-end;
    display: flex;
}
.header .main-header .boxes .btn-wrapper {
    grid-area: 1/6/2/7;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    margin-left: 40px;
    display: flex;
}
.header .main-header .boxes .btn-wrapper .bt {
    gap: 8px;
    height: 32px;
    padding: 0;
}
.header .main-header .boxes .btn-wrapper .cart-btn {
    position: relative;
    overflow: visible;
}
.header .main-header .boxes .btn-wrapper .cart-btn .bt-txt {
    font-weight: 100;
    overflow: hidden;
}
.header .main-header .boxes .btn-wrapper .cart-btn .cart-dot {
    visibility: hidden;
    background-color: var(--theme-color-1);
    color: #fff;
    text-align: center;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
    font-size: 8px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    position: absolute;
    top: 6px;
    right: 6px;
    transform: translate(50%, -50%);
}
.header .main-header .boxes .menu-wrapper {
    grid-area: 2/1/3/6;
    gap: 32px;
    height: 100%;
    display: flex;
    position: relative;
}
.header .main-header .boxes .menu-wrapper .menu {
    justify-content: center;
    align-items: center;
    min-width: 0;
    height: 100%;
    display: flex;
    position: relative;
}
.header .main-header .boxes .menu-wrapper .menu a,
.header .main-header .boxes .menu-wrapper .menu span {
    color: var(--theme-color-3);
}
.header .main-header .boxes .menu-wrapper .menu .main-menu {
    align-items: center;
    gap: 8px;
    height: fit-content;
    padding: 4px 8px;
    display: flex;
}
.header .main-header .boxes .menu-wrapper .menu .main-menu .ico-chevron {
    display: none;
}
.header .main-header .boxes .menu-wrapper .menu .main-menu .ico-chevron.child {
    display: inline-block;
}
.header .main-header .boxes .menu-wrapper .menu .child-menu {
    border-radius: var(--radius-radius-lg);
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    background-color: #fff;
    width: fit-content;
    padding: 12px 16px;
    transition: opacity 0.3s;
    position: absolute;
    top: 45px;
    left: 0;
    box-shadow: 0 6px 40px 10px #4d4d5a26;
}
.header .main-header .boxes .menu-wrapper .menu .child-menu .custom-scroll {
    width: 100%;
}
.header .main-header .boxes .menu-wrapper .menu .child-menu .custom-scroll .content {
    height: auto;
    padding: 0;
}
.header .main-header .boxes .menu-wrapper .menu .child-menu .custom-scroll .content .menu-options {
    flex-direction: column;
    gap: 4px;
    display: flex;
}
.header .main-header .boxes .menu-wrapper .menu .child-menu .custom-scroll .content .menu-options .menu-option {
    justify-content: flex-start;
    width: 100%;
    padding: 8px;
}
.header .main-header .boxes .config-wrapper {
    grid-area: 2/5/3/7;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    display: flex;
}
.header .main-header .boxes .config-wrapper .config-btn {
    min-width: 248px;
    max-width: 269px;
    max-height: 48px;
}
.header .search-content {
    opacity: 0;
    z-index: 99;
    pointer-events: none;
    background-color: #fff;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    box-shadow: 0 6px 40px 10px #4d4d5a26;
}
.header .search-content .search-container {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 16px;
    display: flex;
}
.header .search-content .search-container .search-wrapper {
    width: 100%;
    display: flex;
}
.header .search-content .search-container .search-wrapper .bt-search-back {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 40px;
    margin-right: 16px;
    padding: 0;
    display: flex;
}
.header .search-content .search-container .search-wrapper .search-box {
    width: 100%;
}
.header .search-content .search-container .bt-secondary {
    height: 40px;
}
@media screen and (width<=1440px) {
    .header .main-header .boxes .menu-wrapper {
        margin-left: 0;
    }
    .header .main-header .boxes .config-wrapper {
        margin-right: 0;
    }
}
@media screen and (width<=1200px) {
    .header {
        --search-box-width: 410px;
    }
    .header .main-header .boxes:after {
        width: 0;
    }
    .header .main-header .boxes .logo-trustpilot-wrapper .logo img,
    .header .main-header .boxes .logo-trustpilot-wrapper .logo .icon-logo-primary {
        width: 123px;
        height: 40px;
    }
    .header .main-header .boxes .logo-trustpilot-wrapper .trustpilot {
        display: none;
    }
    .header .main-header .boxes .search-wrapper {
        grid-area: 2/1/3/5;
        justify-content: flex-start;
        width: 100%;
    }
    .header .main-header .boxes .btn-wrapper {
        grid-area: 1/4/2/7;
        margin: 0 24px 0 0;
    }
    .header .main-header .boxes .menu-wrapper {
        grid-area: 1/7/2/8;
    }
    .header .main-header .boxes .menu-wrapper .menu {
        display: none;
    }
    .header .main-header .boxes .menu-wrapper .menu:first-child {
        display: unset;
        align-content: center;
    }
    .header .main-header .boxes .menu-wrapper .menu:first-child svg {
        width: 32px;
        height: 32px;
    }
    .header .main-header .boxes .menu-wrapper .menu:first-child button {
        padding: 0;
    }
    .header .main-header .boxes .menu-wrapper .menu:first-child .bt-txt {
        display: none;
    }
    .header .main-header .boxes .config-wrapper {
        grid-area: 2/5/3/8;
        margin-right: 0;
        font-size: 14px;
        line-height: 26px;
    }
    .header .main-header .boxes .config-wrapper .config-btn {
        max-height: 40px;
    }
}
@media screen and (width<=743px) {
    .header {
        --search-box-width: 48px;
    }
    .header .main-header {
        padding: 16px 0;
    }
    .header .main-header .boxes {
        grid-template-columns: repeat(13, 1fr);
    }
    .header .main-header .boxes .logo-trustpilot-wrapper {
        grid-area: 1/1/2/3;
    }
    .header .main-header .boxes .logo-trustpilot-wrapper .logo img,
    .header .main-header .boxes .logo-trustpilot-wrapper .logo .icon-logo-primary {
        width: 99px;
        height: 32px;
    }
    .header .main-header .boxes .search-wrapper {
        grid-area: 2/1/3/2;
    }
    .header .main-header .boxes .btn-wrapper {
        grid-area: 1/12/2/13;
        gap: 16px;
        margin-right: 0;
    }
    .header .main-header .boxes .btn-wrapper .bt .bt-txt {
        display: none;
    }
    .header .main-header .boxes .menu-wrapper {
        grid-area: 1/13/2/14;
        justify-content: flex-end;
        margin-left: 16px;
    }
    .header .main-header .boxes .config-wrapper {
        grid-area: 2/2/3/14;
        padding-left: 24px;
    }
    .header .main-header .boxes .config-wrapper .config-btn {
        max-height: 48px;
        max-width: unset;
        min-width: unset;
    }
}
.side-menu {
    --heading-height: 56px;
    --main-menu: 46px;
    z-index: 11;
    background-color: #fff;
    width: calc(100% - 70px);
    max-width: min(540px, 100%);
    height: 100vh;
    transition: transform 0.6s;
    position: fixed;
    top: 0;
    transform: translate(-100%);
}
.side-menu .side-heading {
    height: var(--heading-height);
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    display: flex;
}
.side-menu .side-heading .back-btn {
    opacity: 0;
    gap: 10px;
    transition: opacity 0.6s;
}
.side-menu ul {
    width: calc(100% - 4px);
    height: calc(100% - var(--heading-height) - 24px);
    opacity: 0;
    z-index: 1;
    direction: rtl;
    margin-left: 4px;
    padding-right: 0;
    transition: all 0.5s ease-in-out;
    position: absolute;
    left: -478px;
    overflow-y: auto;
}
.side-menu ul .title {
    padding: 16px 24px 16px 42px;
    font-weight: 400;
}
.side-menu ul li {
    cursor: pointer;
    direction: ltr;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px 12px 42px;
    transition: all 0.35s ease-in-out;
    display: flex;
}
.side-menu ul li .title-hamburger-menu {
    font-weight: 400;
}
.side-menu ul li a,
.side-menu ul li p {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 800;
    overflow: hidden;
}
.side-menu .icon {
    flex-shrink: 0;
}
@supports (height: 100dvh) {
    .side-menu {
        --main-menu: 46px;
        --heading-height: 56px;
        height: 100dvh;
    }
}
footer .footer-container {
    border-radius: var(--radius-radius-xl) var(--radius-radius-xl) 0 0;
    background: var(--skylar-green-gradient);
    width: 100%;
    height: fit-content;
    padding: 80px 0 97px;
    position: relative;
}
footer .footer-container:after {
    content: "";
    background-blend-mode: overlay;
    z-index: 1;
    background-image: url(/assetfiles/img/skylar/shared/footer-bg.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: calc(100% - 80px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 40px;
}
footer .footer-container .footer-wrapper {
    z-index: 2;
}
footer .footer-container .footer-wrapper .grid-boxes {
    grid-template-columns: repeat(3, 1fr) 30%;
    gap: 93px;
    display: grid;
}
footer .footer-container .footer-wrapper .grid-boxes .mb-logo {
    margin-left: auto;
    display: none;
}
footer .footer-container .footer-wrapper .grid-boxes .mb-logo .icon-logo-secondary {
    width: 140px;
    height: 45px;
}
footer .footer-container .footer-wrapper .grid-boxes .info-content {
    margin-top: 32px;
}
footer .footer-container .footer-wrapper .grid-boxes .info-content ul li a,
footer .footer-container .footer-wrapper .grid-boxes .info-content .socials a {
    transition: all 0.2s ease-out;
}
footer .footer-container .footer-wrapper .grid-boxes .heading-txt {
    padding-bottom: 16px;
}
footer .footer-container .footer-wrapper .grid-boxes ul,
footer .footer-container .footer-wrapper .grid-boxes .address {
    flex-direction: column;
    gap: 12px;
    display: flex;
}
footer .footer-container .footer-wrapper .grid-boxes ul li,
footer .footer-container .footer-wrapper .grid-boxes ul a,
footer .footer-container .footer-wrapper .grid-boxes .address li,
footer .footer-container .footer-wrapper .grid-boxes .address a {
    align-items: center;
    gap: 8px;
    padding: 0;
    display: flex;
}
footer .footer-container .footer-wrapper .grid-boxes ul li .day-txt,
footer .footer-container .footer-wrapper .grid-boxes ul a .day-txt,
footer .footer-container .footer-wrapper .grid-boxes .address li .day-txt,
footer .footer-container .footer-wrapper .grid-boxes .address a .day-txt {
    min-width: 80px;
}
footer .footer-container .footer-wrapper .grid-boxes ul li .time-txt,
footer .footer-container .footer-wrapper .grid-boxes ul a .time-txt,
footer .footer-container .footer-wrapper .grid-boxes .address li .time-txt,
footer .footer-container .footer-wrapper .grid-boxes .address a .time-txt {
    min-width: 110px;
}
footer .footer-container .footer-wrapper .grid-boxes .contacts .content {
    flex-direction: column;
    gap: 24px;
    display: flex;
}
footer .footer-container .footer-wrapper .grid-boxes .contacts .content .socials {
    gap: 12px;
    display: flex;
}
footer .footer-container .footer-wrapper .grid-boxes .request-wrapper {
    --btn-height: 64px;
    justify-content: flex-end;
    gap: 40px;
    display: flex;
}
footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure {
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 412px;
    display: flex;
}
footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure .logo {
    margin-left: auto;
}
footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure .logo .icon-logo-secondary {
    width: 266px;
    height: 86px;
}
footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure .mail-subscribe-wrapper {
    width: 100%;
}
footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure .mail-subscribe-wrapper .subscribe-box {
    width: 100%;
    height: var(--btn-height);
    border: 1px solid #0000;
    display: flex;
}
footer
    .footer-container
    .footer-wrapper
    .grid-boxes
    .request-wrapper
    .brochure
    .mail-subscribe-wrapper
    .subscribe-box
    .email-input {
    border-radius: var(--radius-radius-sm) 0 0 var(--radius-radius-sm);
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding-left: 24px;
    font-style: normal;
    font-weight: 400;
}
footer
    .footer-container
    .footer-wrapper
    .grid-boxes
    .request-wrapper
    .brochure
    .mail-subscribe-wrapper
    .subscribe-box
    .subscribe-btn {
    border-radius: 0 var(--radius-radius-sm) var(--radius-radius-sm) 0;
    width: 150px;
    height: 100%;
    max-width: unset;
    min-width: unset;
    padding: 0 21px;
}
footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure .mail-subscribe-wrapper .name-input {
    width: 100%;
    height: var(--btn-height);
    border-radius: var(--radius-radius-sm);
    background-color: #fff;
    border: 1px solid #0000;
    padding-left: 24px;
    padding-right: 24px;
    font-style: normal;
    font-weight: 400;
}
footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure .mail-subscribe-wrapper .validate {
    opacity: 0;
    visibility: hidden;
    width: 100%;
    margin: 8px 0;
    padding: 0 24px;
    transition: opacity 0.3s;
}
footer
    .footer-container
    .footer-wrapper
    .grid-boxes
    .request-wrapper
    .brochure
    .mail-subscribe-wrapper
    .validate
    .validate-txt {
    color: var(--theme-color-error);
}
footer .bottom-wrapper {
    background: #fff;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: fit-content;
    min-height: 57px;
    display: flex;
}
footer .bottom-wrapper .run-on-wrapper {
    align-items: center;
    gap: 16px;
    display: flex;
}
footer .bottom-wrapper .run-on-wrapper a .run-on-block {
    align-items: center;
    gap: 6px;
    display: flex;
}
footer .bottom-wrapper .run-on-wrapper a .run-on-block .run-on-logo {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
}
footer .bottom-wrapper .run-on-wrapper a .run-on-block .run-on-logo .logo-colengo {
    filter: grayscale() brightness(1.8);
    width: 16px;
    height: 16px;
    transition: all 0.3s ease-out;
    position: absolute;
    top: 0;
    left: 0;
}
footer .bottom-wrapper .run-on-wrapper a .run-on-block .run-on-txt-1 {
    font-weight: 400;
}
footer .bottom-wrapper .run-on-wrapper a .run-on-block .run-on-txt-2 {
    font-weight: 200;
}
@media screen and (width<=1200px) {
    footer .footer-container {
        padding: 32px 0 48px;
    }
    footer .footer-container:after {
        display: none;
    }
    footer .footer-container .footer-wrapper .grid-boxes {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    footer .footer-container .footer-wrapper .grid-boxes .info-content {
        margin-top: 0;
    }
    footer .footer-container .footer-wrapper .grid-boxes .footer-menu {
        order: 1;
    }
    footer .footer-container .footer-wrapper .grid-boxes .open-hours {
        order: 2;
    }
    footer .footer-container .footer-wrapper .grid-boxes .contacts {
        order: 3;
    }
    footer .footer-container .footer-wrapper .grid-boxes .request-wrapper {
        --btn-height: 48px;
        order: 4;
    }
    footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure .logo .icon-logo-secondary {
        width: 220px;
        height: 72px;
    }
    footer
        .footer-container
        .footer-wrapper
        .grid-boxes
        .request-wrapper
        .brochure
        .mail-subscribe-wrapper
        .subscribe-box
        .subscribe-btn {
        width: 148px;
    }
}
@media screen and (width<=743px) {
    footer .footer-container {
        padding: 16px 0 32px;
    }
    footer .footer-container .footer-wrapper .grid-boxes {
        grid-template-columns: 1fr;
        grid-template-rows: unset;
        gap: 0;
    }
    footer .footer-container .footer-wrapper .grid-boxes .mb-logo {
        margin-bottom: 24px;
        display: inline-block;
    }
    footer .footer-container .footer-wrapper .grid-boxes .info-content {
        margin-bottom: 32px;
    }
    footer .footer-container .footer-wrapper .grid-boxes .request-wrapper {
        flex-direction: column;
        gap: 24px;
    }
    footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure {
        max-width: unset;
    }
    footer .footer-container .footer-wrapper .grid-boxes .request-wrapper .brochure .logo {
        display: none;
    }
    footer
        .footer-container
        .footer-wrapper
        .grid-boxes
        .request-wrapper
        .brochure
        .mail-subscribe-wrapper
        .subscribe-box
        .subscribe-btn {
        width: 128px;
    }
    footer .bottom-wrapper {
        flex-direction: column;
        gap: 24px;
        padding: 8px;
    }
}
.search-box {
    border-radius: var(--radius-radius-sm);
    background-color: var(--theme-color-3-light-95);
    align-items: center;
    gap: 12px;
    width: 245px;
    height: 40px;
    display: flex;
}
.search-box .search-input {
    background-color: var(--theme-color-3-light-95);
    width: 100%;
    margin-left: 16px;
    font-style: normal;
    font-weight: 400;
}
.search-box .search-btn {
    background-color: var(--theme-color-3);
    border-radius: 0 var(--radius-radius-sm) var(--radius-radius-sm) 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
}
.search-box .search-btn .ico-search {
    --color-1: #fff;
}
.search-box .search-btn .ico-search-bold {
    display: none;
}
.highlight-item-card {
    aspect-ratio: 334/504;
    border-radius: var(--radius-radius-lg);
    background-color: #fff;
    min-width: 321px;
    max-width: 334px;
    transition: box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 40px 10px #4d4d5a26;
}
.highlight-item-card.last-item {
    background-color: var(--theme-color-4);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}
.highlight-item-card.last-item .details {
    color: #fff;
    text-align: center;
    width: 100%;
}
.highlight-item-card.last-item .details .title,
.highlight-item-card.last-item .details .description {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.highlight-item-card.last-item .details .bt {
    color: var(--theme-color-3);
}
.highlight-item-card .image-wrapper {
    aspect-ratio: 334/251;
    position: relative;
    overflow: hidden;
}
.highlight-item-card .image-wrapper .image-item-wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.highlight-item-card .image-wrapper .image-item-wrapper .image-item {
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
    position: absolute;
    top: 0;
    left: 0;
}
.highlight-item-card .image-wrapper .image-item-wrapper .image-item img,
.highlight-item-card .image-wrapper .image-item-wrapper .image-item picture,
.highlight-item-card .image-wrapper .image-item-wrapper .image-item canvas,
.highlight-item-card .image-wrapper .image-item-wrapper .image-item video,
.highlight-item-card .image-wrapper .image-item-wrapper .image-item iframe {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.highlight-item-card .image-wrapper .image-item-wrapper .image-item:first-child {
    opacity: 1;
}
.highlight-item-card .image-wrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.highlight-item-card .details {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    padding: 16px;
    display: flex;
    position: relative;
}
.highlight-item-card .details .product-title {
    text-align: center;
    max-width: 333px;
    height: 33px;
    margin-bottom: 8px;
    overflow: hidden;
}
.highlight-item-card .details .bt {
    height: 50px;
}
.highlight-item-card .details .bt-3d-config .bt-icon {
    display: none;
}
.highlight-item-card .details .button-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0 28px;
    display: flex;
}
@media screen and (width<=1200px) {
    .highlight-item-card {
        max-width: unset;
        min-width: unset;
        aspect-ratio: unset;
    }
}
@media screen and (width<=743px) {
    .highlight-item-card {
        --title-lg: 12px;
        --title-line-height-lg: 18px;
        --text-md: 12px;
        --line-height-text-md: 18px;
        --title-xs: 13px;
        --title-line-height-xs: 18px;
        --text-xl: 10px;
        --line-height-text-xl: 14px;
        border-radius: var(--radius-radius-md);
        aspect-ratio: unset;
    }
    .highlight-item-card.last-item {
        --title-lg: 15px;
        --title-line-height-lg: 19px;
        height: 100%;
    }
    .highlight-item-card.last-item .details {
        padding: 47px 16px;
    }
    .highlight-item-card.last-item .details .description {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    .highlight-item-card .image-wrapper {
        aspect-ratio: 156/116;
    }
    .highlight-item-card .details {
        gap: 8px;
        margin: 0;
        padding: 16px 8px;
    }
    .highlight-item-card .details .product-title {
        max-width: 110px;
        height: 18px;
        margin-bottom: 17px;
    }
    .highlight-item-card .details .bt {
        max-width: unset;
        align-items: start;
        min-width: 95px;
        height: 40px;
        padding: 12px 8px;
        display: flex;
    }
    .highlight-item-card .details .bt .button-txt {
        text-align: center;
        height: 100%;
        overflow: hidden;
    }
    .highlight-item-card .details .button-wrapper {
        flex-direction: row;
        gap: 8px;
        padding: 0 12px;
    }
    .highlight-item-card .details .button-wrapper .bt-3d-config {
        min-width: unset;
        flex-shrink: 0;
        align-items: center;
        width: 40px;
        padding: 0 4px;
    }
    .highlight-item-card .details .button-wrapper .bt-3d-config .bt-name {
        display: none;
    }
    .highlight-item-card .details .button-wrapper .bt-3d-config .bt-icon {
        display: unset;
    }
}
.custom-content-read-more {
    flex-direction: column;
    gap: 10px;
    display: flex;
}
.custom-content-read-more.read-less .description .txt {
    -webkit-line-clamp: var(--line-max, 10);
    -webkit-box-orient: vertical;
    animation: 1s ease-in-out readLess;
    display: -webkit-box;
    overflow: hidden;
}
.custom-content-read-more.read-less .bt-more-over .bt-more {
    display: unset;
}
.custom-content-read-more.read-less .bt-more-over .bt-less {
    display: none;
}
.custom-content-read-more.read-less .bt-more-over .icon-box .icon {
    transform: scaleY(-1);
}
.custom-content-read-more .description {
    max-width: var(--max-width-description, unset);
    transition: all 0.3s;
    overflow: hidden;
}
.custom-content-read-more .bt-more-over {
    align-items: center;
    gap: 8px;
    width: fit-content;
    display: flex;
}
.custom-content-read-more .bt-more-over .bt-more {
    display: none;
}
.custom-content-read-more .bt-more-over .bt-less {
    display: unset;
}
.custom-content-read-more .bt-more-over .bt-txt {
    font-weight: 800;
}
.custom-content-read-more .bt-more-over .icon-box {
    background-color: var(--theme-color-1);
    border-radius: var(--radius-radius);
    --color-1: white;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    transition: all 0.3s;
    display: flex;
}
.custom-content-read-more .bt-more-over .icon-box .icon {
    transition: all 0.3s;
}
.popup-video {
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
}
.popup-video .close-btn {
    --color-1: white;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-100%);
}
.popup-video .video-wrapper {
    width: clamp(300px, 100vw - 36px, 900px);
    max-height: calc(100vh - 100px);
    overflow: hidden;
}
.home-highlight-slide {
    --width-slide-button: 44px;
    height: calc(100vh - (var(--header-height) + var(--shop-notification-height)));
    min-height: 600px;
    position: relative;
}
.home-highlight-slide .container {
    position: initial;
    height: 100%;
}
.home-highlight-slide .container .content-wrapper {
    z-index: 2;
    flex-direction: column;
    gap: 56px;
    width: 618px;
    padding: 0 16px;
    transition: all 0.5s;
    display: flex;
    position: absolute;
    top: 40%;
    transform: translateY(-88px);
}
.home-highlight-slide .container .content-wrapper .content {
    color: #fff;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    display: flex;
}
.home-highlight-slide .container .content-wrapper .content .subtitle {
    height: 30px;
}
.home-highlight-slide .container .content-wrapper .content .title {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.home-highlight-slide .container .content-wrapper .content .description {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.home-highlight-slide .container .content-wrapper .button-wrapper {
    gap: 32px;
    width: 100%;
    display: flex;
}
.home-highlight-slide .container .content-wrapper .button-wrapper .bt {
    max-width: 277px;
}
.home-highlight-slide .container .slide-button-wrapper {
    z-index: 2;
    gap: 16px;
    transition: all 0.5s;
    display: flex;
    position: absolute;
    bottom: 10%;
    transform: translateY(100%);
}
.home-highlight-slide .container .slide-button-wrapper .bt-slide {
    height: var(--width-slide-button);
    width: var(--width-slide-button);
    padding: unset;
    border: 1px solid #fff;
    transition: all 0.5s;
}
.home-highlight-slide .container .slide-button-wrapper .bt-slide .icon {
    --color-1: transparent;
    fill: none;
    stroke: #fff;
    stroke-width: 1px;
    stroke-linejoin: round;
}
.home-highlight-slide .container .slide-button-wrapper .bt-slide:disabled {
    opacity: 0.3;
}
.home-highlight-slide .swiper {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.home-highlight-slide .swiper .swiper-slide {
    background-color: var(--theme-color-3-light-80);
}
.home-highlight-slide .swiper .item-img {
    width: 100%;
    height: 100%;
}
.home-highlight-slide .swiper .item-img img,
.home-highlight-slide .swiper .item-img picture,
.home-highlight-slide .swiper .item-img canvas,
.home-highlight-slide .swiper .item-img video,
.home-highlight-slide .swiper .item-img iframe {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
@media screen and (width<=1200px) {
    .home-highlight-slide {
        min-height: 450px;
    }
    .home-highlight-slide .container .content-wrapper {
        top: unset;
        gap: 40px;
        bottom: 50%;
        transform: translateY(50%);
    }
    .home-highlight-slide .container .content-wrapper .content .title {
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    .home-highlight-slide .container .slide-button-wrapper {
        bottom: 76px;
    }
}
@media screen and (width<=743px) {
    .home-highlight-slide .container .content-wrapper {
        width: 100%;
        bottom: calc(50% + var(--width-slide-button));
        align-items: center;
        gap: 32px;
        left: 50%;
        transform: translate(-50%, 50%);
    }
    .home-highlight-slide .container .content-wrapper .content .subtitle {
        height: 24px;
    }
    .home-highlight-slide .container .content-wrapper .content .description {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    .home-highlight-slide .container .content-wrapper .button-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .home-highlight-slide .container .slide-button-wrapper {
        bottom: 15%;
    }
}
.masonry-images {
    --image-width-sm: 352px;
    --image-width-md: 415px;
    --image-width-lg: 626px;
    --gap-content: 32px;
}
.masonry-images .container .content .title,
.masonry-images .container .content .description {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.masonry-images .image-slide {
    gap: var(--gap-content);
    padding-top: 32px;
    display: flex;
}
.masonry-images .image-slide .image-wrapper {
    gap: var(--gap-content);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: var(--image-width-sm) calc(var(--image-width-lg) - var(--image-width-sm) - var(--gap-content))
        var(--image-width-sm) var(--image-width-md);
    width: max-content;
    display: grid;
}
.masonry-images .image-slide .image-wrapper[data-animated="true"] {
    animation: 30s linear infinite slideLeft;
}
.masonry-images .image-slide .image-wrapper .image {
    border-radius: var(--radius-radius-lg);
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
}
.masonry-images .image-slide .image-wrapper .image:nth-child(5n + 1),
.masonry-images .image-slide .image-wrapper .image:nth-child(5n + 4) {
    height: var(--image-width-sm);
}
.masonry-images .image-slide .image-wrapper .image:nth-child(5n + 2),
.masonry-images .image-slide .image-wrapper .image:nth-child(5n + 3) {
    height: var(--image-width-sm);
    grid-column: span 2;
}
.masonry-images .image-slide .image-wrapper .image:nth-child(5n) {
    grid-row: span 2;
    height: 100%;
}
.masonry-images .image-slide .image-wrapper .image img,
.masonry-images .image-slide .image-wrapper .image picture,
.masonry-images .image-slide .image-wrapper .image canvas,
.masonry-images .image-slide .image-wrapper .image video,
.masonry-images .image-slide .image-wrapper .image iframe {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
@media screen and (width<=1200px) {
    .masonry-images {
        --image-width-sm: 292px;
        --image-width-md: 346px;
        --image-width-lg: 519px;
    }
}
@media screen and (width<=743px) {
    .masonry-images {
        --image-width-sm: 180px;
        --image-width-md: 212px;
        --image-width-lg: 320px;
        --gap-content: 16px;
    }
}
.highlight-content .content .title,
.highlight-content .content .description {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.highlight-content .product-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    padding-top: 32px;
    display: flex;
}
@media screen and (width<=1200px) {
    .highlight-content .product-wrapper {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        display: grid;
    }
}
@media screen and (width<=1090px) {
    .highlight-content .product-wrapper {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
    }
}
@media screen and (width<=743px) {
    .highlight-content .content .title,
    .highlight-content .content .description {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    .highlight-content .product-wrapper {
        gap: 16px;
    }
}
.usp {
    --line-height-header-3: 30px;
    --usp-width: 328px;
}
.usp .usp-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    width: 100%;
    display: flex;
}
.usp .usp-wrapper .usp-content {
    width: var(--usp-width);
    height: inherit;
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
}
.usp .usp-wrapper .usp-content .icon-wrapper {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    display: flex;
    overflow: hidden;
}
.usp .usp-wrapper .usp-content .icon-wrapper img {
    object-fit: contain;
    width: 108px;
    height: 108px;
}
.usp .usp-wrapper .usp-content .content {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    display: flex;
}
.usp .usp-wrapper .usp-content .content .title {
    width: 100%;
    max-height: 60px;
    margin-top: 16px;
    overflow: hidden;
}
.usp .usp-wrapper .usp-content .content .title .txt {
    position: relative;
}
.usp .usp-wrapper .usp-content .content .description {
    width: 100%;
    height: 52px;
    margin-top: 8px;
    overflow: hidden;
}
@media screen and (width<=1200px) {
    .usp {
        --usp-width: 324px;
    }
}
@media screen and (width<=743px) {
    .usp {
        --usp-width: 156px;
    }
    .usp .usp-wrapper {
        gap: 32px 16px;
    }
    .usp .usp-wrapper .usp-content {
        flex: auto;
    }
    .usp .usp-wrapper .usp-content .content {
        justify-content: unset;
    }
    .usp .usp-wrapper .usp-content .content .title,
    .usp .usp-wrapper .usp-content .content .description {
        max-height: unset;
        height: unset;
    }
    .usp .usp-wrapper .usp-content .icon-wrapper {
        padding: 5px;
    }
    .usp .usp-wrapper .usp-content .icon-wrapper img {
        width: 70px;
        height: 70px;
    }
}
.content-read-more {
    --line-max: 6;
}
.content-read-more .content {
    flex-direction: column;
    gap: 16px;
    max-width: 1066px;
    display: flex;
}
.content-read-more .content .custom-content-read-more {
    gap: 24px;
}
@media screen and (width<=1200px) {
    .content-read-more,
    .content-read-more .content .custom-content-read-more {
        --line-max: 10;
    }
}
@media screen and (width<=743px) {
    .content-read-more {
        --line-max: 18;
    }
}
.blogs-slide {
    --width-slide-button: 44px;
    --height-image-blog-card: 342px;
}
.blogs-slide .container .slide {
    margin: 32px 0;
}
.blogs-slide .container .slide .swiper {
    overflow: unset;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper {
    width: fit-content;
    height: auto;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper:not(.swiper-slide-visible) .page-card {
    opacity: 0.6;
    pointer-events: none;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card {
    border-radius: var(--radius-radius-md);
    width: 100%;
    max-width: 456px;
    font-weight: 400;
    transition: all 0.3s;
    display: block;
    overflow: hidden;
    box-shadow: 0 6px 40px 10px #4d4d5a26;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .image-wrapper {
    height: var(--height-image-blog-card);
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .image-wrapper img,
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .image-wrapper picture,
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .image-wrapper canvas,
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .image-wrapper video,
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .image-wrapper iframe {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .details {
    background-color: #fff;
    flex-direction: column;
    padding: 32px 24px;
    display: flex;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .details .title {
    height: 60px;
    margin-bottom: 12px;
    overflow: hidden;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .details .description {
    height: 52px;
    margin-bottom: 24px;
    overflow: hidden;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .details .bt-more-over {
    --color-1: white;
    align-items: center;
    gap: 8px;
    width: fit-content;
    height: 24px;
    font-weight: 700;
    display: flex;
}
.blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .details .bt-more-over .icon-box {
    border-radius: var(--radius-radius);
    background-color: var(--theme-color-1);
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    transition: all 0.3s;
    display: flex;
}
.blogs-slide .container .controls-wrapper {
    height: var(--width-slide-button);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    justify-content: flex-end;
    gap: 32px;
    transition: all 0.3s;
    display: flex;
}
.blogs-slide .container .controls-wrapper .slider-pagination {
    width: fit-content;
    color: var(--theme-color-3-light-60);
    align-items: center;
    gap: 4px;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    display: flex;
    transform: translateY(2px);
}
.blogs-slide .container .controls-wrapper .slider-pagination .page-count {
    color: var(--theme-color-3);
}
.blogs-slide .container .controls-wrapper .button-wrapper {
    gap: 16px;
    display: flex;
}
.blogs-slide .container .controls-wrapper .button-wrapper .bt-slide {
    --color-1: white;
    min-width: unset;
    max-width: unset;
    height: var(--width-slide-button);
    width: var(--width-slide-button);
    padding: unset;
}
@media screen and (width<=743px) {
    .blogs-slide {
        --height-image-blog-card: 246px;
    }
    .blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card {
        width: 328px;
    }
    .blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .details .title {
        height: 52px;
        margin-bottom: 12px;
    }
    .blogs-slide .container .slide .swiper .swiper-wrapper .page-card-wrapper .page-card .details .description {
        height: 52px;
        margin-bottom: 16px;
    }
}
.image-left-content-right {
    --width-image: 570px;
    --width-slide-button: 44px;
    --padding-bottom-content: 24px;
    --gap-content: 138px;
}
.image-left-content-right .container .content-wrapper {
    padding-bottom: var(--padding-bottom-content);
    gap: var(--gap-content);
    display: flex;
    position: relative;
}
.image-left-content-right .container .content-wrapper .image-slide {
    height: fit-content;
    position: relative;
    overflow: hidden;
}
.image-left-content-right .container .content-wrapper .image-slide .swiper {
    margin: unset;
    padding-right: var(--padding-bottom-content);
    padding-bottom: var(--padding-bottom-content);
    overflow: unset;
    position: relative;
}
.image-left-content-right .container .content-wrapper .image-slide:after {
    content: "";
    height: calc(100% - var(--padding-bottom-content));
    width: calc(100% - var(--padding-bottom-content));
    border-radius: var(--radius-radius-lg);
    top: var(--padding-bottom-content);
    left: var(--padding-bottom-content);
    opacity: 0.25;
    background: var(--skylar-licht-gradient);
    position: absolute;
}
.image-left-content-right .container .content-wrapper .image-slide .image-wrapper {
    z-index: 2;
    width: var(--width-image);
    position: relative;
}
.image-left-content-right .container .content-wrapper .image-slide .image-wrapper .item-img {
    aspect-ratio: 1;
    border-radius: var(--radius-radius-lg);
    height: auto;
    overflow: hidden;
}
.image-left-content-right .container .content-wrapper .image-slide .image-wrapper img,
.image-left-content-right .container .content-wrapper .image-slide .image-wrapper picture,
.image-left-content-right .container .content-wrapper .image-slide .image-wrapper canvas,
.image-left-content-right .container .content-wrapper .image-slide .image-wrapper video,
.image-left-content-right .container .content-wrapper .image-slide .image-wrapper iframe {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.image-left-content-right .container .content-wrapper .content {
    opacity: 1;
    z-index: 1;
    flex-direction: column;
    width: 100%;
    max-width: 572px;
    height: fit-content;
    padding-top: 88px;
    transition:
        opacity 5s,
        display 5s;
    display: flex;
    position: relative;
}
.image-left-content-right .container .content-wrapper .content .title {
    margin-top: 4px;
    margin-bottom: 24px;
}
.image-left-content-right .container .content-wrapper .content .description {
    margin-bottom: 16px;
}
.image-left-content-right .container .content-wrapper .content .bt-more-over {
    --color-1: var(--theme-color-1);
    align-items: center;
    gap: 8px;
    width: fit-content;
    height: 24px;
    font-weight: 700;
    transition: all 0.3s;
    display: flex;
}
@media screen and (width<=1200px) {
    .image-left-content-right {
        --gap-content: 40px;
    }
    .image-left-content-right .container .content-wrapper {
        flex-direction: column;
        align-items: center;
        padding-bottom: 0;
    }
    .image-left-content-right .container .content-wrapper .content {
        max-width: unset;
        padding-top: 0;
    }
}
@media screen and (width<=743px) {
    .image-left-content-right {
        --width-image: 312px;
        --padding-bottom-content: 16px;
        --gap-content: 32px;
    }
}
.banner-with-buttons {
    align-items: flex-end;
    min-height: 600px;
    display: flex;
    overflow: hidden;
}
.banner-with-buttons .wrapper .content-wrapper {
    height: 518px;
    display: flex;
    position: relative;
}
.banner-with-buttons .wrapper .content-wrapper .image-wrapper {
    z-index: 5;
    flex-shrink: 0;
    width: 50%;
    height: 518px;
    position: relative;
    left: -12px;
}
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .image {
    justify-content: center;
    align-items: end;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
}
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .image:after {
    content: "";
    opacity: 0.25;
    background: var(--skylar-licht-gradient);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .image img,
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .image picture,
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .image canvas,
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .image video,
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .image iframe {
    z-index: 1;
    object-fit: contain;
    width: 120%;
    height: 600px;
    max-inline-size: unset;
    justify-content: center;
    display: flex;
    position: relative;
}
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .short-desc {
    z-index: 2;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: fit-content;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 95%;
}
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .short-desc .icon {
    flex-shrink: 0;
}
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .short-desc .txt {
    width: 100%;
    transform: translateY(15%);
}
.banner-with-buttons .wrapper .content-wrapper .image-wrapper .short-desc .txt p {
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 34px;
    padding-right: 5px;
    overflow: clip visible;
}
.banner-with-buttons .wrapper .content-wrapper .content {
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    height: 100%;
    display: flex;
    position: relative;
}
.banner-with-buttons .wrapper .content-wrapper .content .details-wrapper {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 386px;
    padding: 32px 52px 32px 88px;
    display: flex;
    position: relative;
}
.banner-with-buttons .wrapper .content-wrapper .content .details-wrapper:before {
    content: "";
    background: var(--skylar-green-gradient);
    border-radius: var(--radius-radius-md);
    z-index: -2;
    width: 200%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
}
.banner-with-buttons .wrapper .content-wrapper .content .details-wrapper:after {
    content: "";
    background-blend-mode: overlay;
    z-index: -1;
    border-radius: var(--radius-radius-md);
    background-image: url(/assetfiles/img/skylar/shared/footer-bg.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}
.banner-with-buttons .wrapper .content-wrapper .content .title {
    max-height: 100px;
    overflow: hidden;
}
.banner-with-buttons .wrapper .content-wrapper .content .subtitle {
    color: #fff;
}
.banner-with-buttons .wrapper .content-wrapper .content .description {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.banner-with-buttons .wrapper .content-wrapper .content .button-wrapper {
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
    display: flex;
}
.banner-with-buttons .wrapper .content-wrapper .content .button-wrapper .bt {
    min-width: 223px;
    max-width: 268px;
    height: 56px;
}
.banner-with-buttons .wrapper .content-wrapper .content .button-wrapper .bt-tertiary {
    color: #fff;
}
@media screen and (width<=1200px) {
    .banner-with-buttons {
        min-height: unset;
    }
    .banner-with-buttons .wrapper {
        padding: 0 0 64px;
    }
    .banner-with-buttons .wrapper .content-wrapper {
        height: unset;
        flex-direction: column;
        gap: 32px;
    }
    .banner-with-buttons .wrapper .content-wrapper:before {
        content: "";
        background: var(--skylar-green-gradient);
        border-radius: var(--radius-radius-md);
        z-index: -2;
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
    }
    .banner-with-buttons .wrapper .content-wrapper:after {
        content: "";
        background-blend-mode: overlay;
        z-index: -1;
        border-radius: var(--radius-radius-md);
        background-image: url(/assetfiles/img/skylar/shared/footer-bg.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
    }
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper {
        bottom: unset;
        left: unset;
        width: 100%;
        height: unset;
        flex-direction: column;
        order: 2;
        align-items: center;
        display: flex;
        position: relative;
    }
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .image {
        width: 512px;
        height: 462px;
        position: relative;
    }
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .image img,
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .image picture,
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .image canvas,
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .image video,
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .image iframe {
        height: 100%;
    }
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .short-desc {
        top: unset;
        left: unset;
        justify-content: flex-end;
        padding-top: 8px;
        position: absolute;
        bottom: 0;
        transform: translateY(100%);
    }
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .short-desc .txt {
        width: fit-content;
        max-width: calc(100% - 64px);
    }
    .banner-with-buttons .wrapper .content-wrapper .content {
        width: 100%;
    }
    .banner-with-buttons .wrapper .content-wrapper .content .details-wrapper {
        min-height: unset;
        padding: 32px 32px 0;
    }
    .banner-with-buttons .wrapper .content-wrapper .content .details-wrapper:before,
    .banner-with-buttons .wrapper .content-wrapper .content .details-wrapper:after {
        display: none;
    }
    .banner-with-buttons .wrapper .content-wrapper .content .title {
        max-height: 88px;
    }
    .banner-with-buttons .wrapper .content-wrapper .content .button-wrapper {
        justify-content: center;
    }
}
@media screen and (width<=743px) {
    .banner-with-buttons .wrapper .content-wrapper {
        gap: 24px;
    }
    .banner-with-buttons .wrapper .content-wrapper .image-wrapper .image {
        width: 272px;
        height: 246px;
    }
    .banner-with-buttons .wrapper .content-wrapper .content .title {
        max-height: 70px;
    }
    .banner-with-buttons .wrapper .content-wrapper .content .description {
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    .banner-with-buttons .wrapper .content-wrapper .content .button-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 16px;
    }
}
.flowchart {
    --width-slide-button: 48px;
}
.flowchart .content {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    display: flex;
}
.flowchart .content .title,
.flowchart .content .description {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.flowchart .controls-wrapper {
    height: var(--width-slide-button);
    opacity: 1;
    visibility: visible;
    justify-content: flex-end;
    gap: 32px;
    transition: all 0.3s;
    display: flex;
}
.flowchart .controls-wrapper .slider-pagination {
    display: none;
}
.flowchart .controls-wrapper .button-wrapper {
    gap: 16px;
    display: flex;
}
.flowchart .controls-wrapper .button-wrapper .bt-slide {
    --color-1: white;
    min-width: unset;
    max-width: unset;
    height: var(--width-slide-button);
    width: var(--width-slide-button);
    padding: unset;
}
.flowchart .slide {
    margin: 32px 0;
}
.flowchart .slide .swiper:after {
    content: "";
    opacity: 1;
    z-index: 0;
    border-bottom: 1px dashed #000;
    width: 100%;
    position: absolute;
    top: 30%;
    left: 0;
}
.flowchart .slide .swiper .swiper-wrapper .card-wrapper {
    width: 100%;
    max-width: 334px;
    height: auto;
}
.flowchart .card {
    text-align: center;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 334px;
    font-weight: 400;
    transition: all 0.3s;
    display: flex;
}
.flowchart .card .image-wrapper {
    border-radius: var(--radius-radius-lg);
    --aspect-ratio: 191 / 239;
    width: 100%;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
    z-index: 1;
    transition: box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}
.flowchart .card .image-wrapper img,
.flowchart .card .image-wrapper picture,
.flowchart .card .image-wrapper canvas,
.flowchart .card .image-wrapper video,
.flowchart .card .image-wrapper iframe {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.flowchart .card .card-detail {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    display: flex;
}
.flowchart .card .card-detail .icon-wrapper {
    width: 48px;
    height: 48px;
}
.flowchart .card .card-detail .icon-wrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.flowchart .card .card-detail .subtitle {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.flowchart .card .card-detail .description {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
@media screen and (width<=1200px) {
    .flowchart .content .title,
    .flowchart .content .description {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    .flowchart .slide {
        margin: 24px 0;
    }
    .flowchart .slide .swiper .swiper-wrapper .card-wrapper,
    .flowchart .card {
        max-width: 324px;
    }
}
@media screen and (width<=743px) {
    .flowchart .slide {
        margin: 16px 0;
    }
    .flowchart .slide .swiper,
    .flowchart .slide .swiper .swiper-wrapper .card-wrapper {
        max-width: 382px;
    }
    .flowchart .card {
        max-width: unset;
    }
}