@itcenteratunihelsinki/huds-lib 0.8.90 → 0.9.1

package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.css

@@ -1,7 +1,3 @@
-/**
- * Mixin for fluid type.
- * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
- */
 /**
  * Swiper 9.2.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -13,15 +9,18 @@
  *
  * Released on: April 21, 2023
  */
+
 @font-face {
   font-family: swiper-icons;
   src: url("data:application/font-woff;charset=utf-8;base64, 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");
   font-weight: 400;
   font-style: normal;
 }
+
 :root {
-  --swiper-theme-color: #007aff;
+  --swiper-theme-color: var(--brand-main);
 }
+
 .swiper,
 swiper-container {
   margin-left: auto;
@@ -33,12 +32,14 @@ swiper-container {
   z-index: 1;
   display: block;
 }
+
 .swiper-vertical > .swiper-wrapper {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
 }
+
 .swiper-wrapper {
   position: relative;
   width: 100%;
@@ -56,19 +57,23 @@ swiper-container {
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
 }
+
 .swiper-android .swiper-slide,
 .swiper-wrapper {
   -webkit-transform: translate3d(0px, 0, 0);
   transform: translate3d(0px, 0, 0);
 }
+
 .swiper-horizontal {
   -ms-touch-action: pan-y;
   touch-action: pan-y;
 }
+
 .swiper-vertical {
   -ms-touch-action: pan-x;
   touch-action: pan-x;
 }
+
 .swiper-slide,
 swiper-slide {
   -ms-flex-negative: 0;
@@ -82,13 +87,16 @@ swiper-slide {
   transition-property: transform, -webkit-transform;
   display: block;
 }
+
 .swiper-slide-invisible-blank {
   visibility: hidden;
 }
+
 .swiper-autoheight,
 .swiper-autoheight .swiper-slide {
   height: auto;
 }
+
 .swiper-autoheight .swiper-wrapper {
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -98,24 +106,29 @@ swiper-slide {
   transition-property: transform, height;
   transition-property: transform, height, -webkit-transform;
 }
+
 .swiper-backface-hidden .swiper-slide {
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
+
 .swiper-3d.swiper-css-mode .swiper-wrapper {
   -webkit-perspective: 1200px;
   perspective: 1200px;
 }
+
 .swiper-3d .swiper-wrapper {
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
+
 .swiper-3d {
   -webkit-perspective: 1200px;
   perspective: 1200px;
 }
+
 .swiper-3d .swiper-cube-shadow,
 .swiper-3d .swiper-slide,
 .swiper-3d .swiper-slide-shadow,
@@ -126,6 +139,7 @@ swiper-slide {
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
+
 .swiper-3d .swiper-slide-shadow,
 .swiper-3d .swiper-slide-shadow-bottom,
 .swiper-3d .swiper-slide-shadow-left,
@@ -139,44 +153,55 @@ swiper-slide {
   pointer-events: none;
   z-index: 10;
 }
+
 .swiper-3d .swiper-slide-shadow {
   background: rgba(0, 0, 0, 0.15);
 }
+
 .swiper-3d .swiper-slide-shadow-left {
   background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
   background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
 }
+
 .swiper-3d .swiper-slide-shadow-right {
   background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
 }
+
 .swiper-3d .swiper-slide-shadow-top {
   background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
   background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
 }
+
 .swiper-3d .swiper-slide-shadow-bottom {
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
 }
+
 .swiper-css-mode > .swiper-wrapper {
   overflow: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
+
 .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
   display: none;
 }
+
 .swiper-css-mode > .swiper-wrapper > .swiper-slide {
   scroll-snap-align: start start;
 }
+
 .swiper-horizontal.swiper-css-mode > .swiper-wrapper {
   -ms-scroll-snap-type: x mandatory;
   scroll-snap-type: x mandatory;
 }
+
 .swiper-vertical.swiper-css-mode > .swiper-wrapper {
   -ms-scroll-snap-type: y mandatory;
   scroll-snap-type: y mandatory;
 }
+
 .swiper-centered > .swiper-wrapper::before {
   content: "";
   -ms-flex-negative: 0;
@@ -185,28 +210,34 @@ swiper-slide {
   -ms-flex-order: 9999;
   order: 9999;
 }
+
 .swiper-centered > .swiper-wrapper > .swiper-slide {
   scroll-snap-align: center center;
   scroll-snap-stop: always;
 }
+
 .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
   -webkit-margin-start: var(--swiper-centered-offset-before);
   margin-inline-start: var(--swiper-centered-offset-before);
 }
+
 .swiper-centered.swiper-horizontal > .swiper-wrapper::before {
   height: 100%;
   min-height: 1px;
   width: var(--swiper-centered-offset-after);
 }
+
 .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
   -webkit-margin-before: var(--swiper-centered-offset-before);
   margin-block-start: var(--swiper-centered-offset-before);
 }
+
 .swiper-centered.swiper-vertical > .swiper-wrapper::before {
   width: 100%;
   min-width: 1px;
   height: var(--swiper-centered-offset-after);
 }
+
 .swiper-lazy-preloader {
   width: 42px;
   height: 42px;
@@ -224,18 +255,22 @@ swiper-slide {
   border-radius: 50%;
   border-top-color: transparent;
 }
+
 .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
 .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
 swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
   -webkit-animation: swiper-preloader-spin 1s infinite linear;
   animation: swiper-preloader-spin 1s infinite linear;
 }
+
 .swiper-lazy-preloader-white {
   --swiper-preloader-color: #fff;
 }
+
 .swiper-lazy-preloader-black {
   --swiper-preloader-color: #000;
 }
+
 @-webkit-keyframes swiper-preloader-spin {
   0% {
     -webkit-transform: rotate(0deg);
@@ -246,6 +281,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
     transform: rotate(360deg);
   }
 }
+
 @keyframes swiper-preloader-spin {
   0% {
     -webkit-transform: rotate(0deg);
@@ -256,11 +292,13 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
     transform: rotate(360deg);
   }
 }
+
 .swiper-virtual .swiper-slide {
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
 }
+
 .swiper-virtual.swiper-css-mode .swiper-wrapper::after {
   content: "";
   position: absolute;
@@ -268,17 +306,21 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
   top: 0;
   pointer-events: none;
 }
+
 .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
   height: 1px;
   width: var(--swiper-virtual-size);
 }
+
 .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
   width: 1px;
   height: var(--swiper-virtual-size);
 }
+
 :root {
   --swiper-navigation-size: 44px;
 }
+
 .swiper-button-next,
 .swiper-button-prev {
   position: absolute;
@@ -299,22 +341,26 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
   justify-content: center;
   color: var(--swiper-navigation-color, var(--swiper-theme-color));
 }
+
 .swiper-button-next.swiper-button-disabled,
 .swiper-button-prev.swiper-button-disabled {
   opacity: 0.35;
   cursor: auto;
   pointer-events: none;
 }
+
 .swiper-button-next.swiper-button-hidden,
 .swiper-button-prev.swiper-button-hidden {
   opacity: 0;
   cursor: auto;
   pointer-events: none;
 }
+
 .swiper-navigation-disabled .swiper-button-next,
 .swiper-navigation-disabled .swiper-button-prev {
   display: none !important;
 }
+
 .swiper-button-next:after,
 .swiper-button-prev:after {
   font-family: swiper-icons;
@@ -324,27 +370,33 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
   font-variant: initial;
   line-height: 1;
 }
+
 .swiper-button-prev,
 .swiper-rtl .swiper-button-next {
   left: var(--swiper-navigation-sides-offset, 10px);
   right: auto;
 }
+
 .swiper-button-prev:after,
 .swiper-rtl .swiper-button-next:after {
   content: "prev";
 }
+
 .swiper-button-next,
 .swiper-rtl .swiper-button-prev {
   right: var(--swiper-navigation-sides-offset, 10px);
   left: auto;
 }
+
 .swiper-button-next:after,
 .swiper-rtl .swiper-button-prev:after {
   content: "next";
 }
+
 .swiper-button-lock {
   display: none;
 }
+
 .swiper-pagination {
   position: absolute;
   text-align: center;
@@ -354,13 +406,16 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
   transform: translate3d(0, 0, 0);
   z-index: 10;
 }
+
 .swiper-pagination.swiper-pagination-hidden {
   opacity: 0;
 }
+
 .swiper-pagination-disabled > .swiper-pagination,
 .swiper-pagination.swiper-pagination-disabled {
   display: none !important;
 }
+
 .swiper-horizontal > .swiper-pagination-bullets,
 .swiper-pagination-bullets.swiper-pagination-horizontal,
 .swiper-pagination-custom,
@@ -370,39 +425,48 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
   left: 0;
   width: 100%;
 }
+
 .swiper-pagination-bullets-dynamic {
   overflow: hidden;
   font-size: 0;
 }
+
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   -webkit-transform: scale(0.33);
   transform: scale(0.33);
   position: relative;
 }
+
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
   -webkit-transform: scale(1);
   transform: scale(1);
 }
+
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
   -webkit-transform: scale(1);
   transform: scale(1);
 }
+
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
   -webkit-transform: scale(0.66);
   transform: scale(0.66);
 }
+
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
   -webkit-transform: scale(0.33);
   transform: scale(0.33);
 }
+
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
   -webkit-transform: scale(0.66);
   transform: scale(0.66);
 }
+
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
   -webkit-transform: scale(0.33);
   transform: scale(0.33);
 }
+
 .swiper-pagination-bullet {
   width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
   height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
@@ -411,6 +475,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
   background: var(--swiper-pagination-bullet-inactive-color, #000);
   opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
 }
+
 button.swiper-pagination-bullet {
   border: none;
   margin: 0;
@@ -421,16 +486,20 @@ button.swiper-pagination-bullet {
   -moz-appearance: none;
   appearance: none;
 }
+
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
 }
+
 .swiper-pagination-bullet:only-child {
   display: none !important;
 }
+
 .swiper-pagination-bullet-active {
   opacity: var(--swiper-pagination-bullet-opacity, 1);
   background: var(--swiper-pagination-color, var(--swiper-theme-color));
 }
+
 .swiper-pagination-vertical.swiper-pagination-bullets,
 .swiper-vertical > .swiper-pagination-bullets {
   right: var(--swiper-pagination-right, 8px);
@@ -439,11 +508,13 @@ button.swiper-pagination-bullet {
   -webkit-transform: translate3d(0px, -50%, 0);
   transform: translate3d(0px, -50%, 0);
 }
+
 .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
 .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
   margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
   display: block;
 }
+
 .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
 .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   top: 50%;
@@ -451,6 +522,7 @@ button.swiper-pagination-bullet {
   transform: translateY(-50%);
   width: 8px;
 }
+
 .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
 .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   display: inline-block;
@@ -459,10 +531,12 @@ button.swiper-pagination-bullet {
   transition: 0.2s transform, 0.2s top;
   transition: 0.2s transform, 0.2s top, 0.2s -webkit-transform;
 }
+
 .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
 }
+
 .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
 .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   left: 50%;
@@ -470,6 +544,7 @@ button.swiper-pagination-bullet {
   transform: translateX(-50%);
   white-space: nowrap;
 }
+
 .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
 .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   -webkit-transition: 0.2s left, 0.2s -webkit-transform;
@@ -477,6 +552,7 @@ button.swiper-pagination-bullet {
   transition: 0.2s transform, 0.2s left;
   transition: 0.2s transform, 0.2s left, 0.2s -webkit-transform;
 }
+
 .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
 :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   -webkit-transition: 0.2s right, 0.2s -webkit-transform;
@@ -484,13 +560,16 @@ button.swiper-pagination-bullet {
   transition: 0.2s transform, 0.2s right;
   transition: 0.2s transform, 0.2s right, 0.2s -webkit-transform;
 }
+
 .swiper-pagination-fraction {
   color: var(--swiper-pagination-fraction-color, inherit);
 }
+
 .swiper-pagination-progressbar {
   background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
   position: absolute;
 }
+
 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
   background: var(--swiper-pagination-color, var(--swiper-theme-color));
   position: absolute;
@@ -503,10 +582,12 @@ button.swiper-pagination-bullet {
   -webkit-transform-origin: left top;
   transform-origin: left top;
 }
+
 .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
   -webkit-transform-origin: right top;
   transform-origin: right top;
 }
+
 .swiper-horizontal > .swiper-pagination-progressbar,
 .swiper-pagination-progressbar.swiper-pagination-horizontal,
 .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
@@ -516,6 +597,7 @@ button.swiper-pagination-bullet {
   left: 0;
   top: 0;
 }
+
 .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
 .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
 .swiper-pagination-progressbar.swiper-pagination-vertical,
@@ -525,19 +607,23 @@ button.swiper-pagination-bullet {
   left: 0;
   top: 0;
 }
+
 .swiper-pagination-lock {
   display: none;
 }
+
 .swiper-scrollbar {
   border-radius: var(--swiper-scrollbar-border-radius, 10px);
   position: relative;
   -ms-touch-action: none;
   background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
 }
+
 .swiper-scrollbar-disabled > .swiper-scrollbar,
 .swiper-scrollbar.swiper-scrollbar-disabled {
   display: none !important;
 }
+
 .swiper-horizontal > .swiper-scrollbar,
 .swiper-scrollbar.swiper-scrollbar-horizontal {
   position: absolute;
@@ -548,6 +634,7 @@ button.swiper-pagination-bullet {
   height: var(--swiper-scrollbar-size, 4px);
   width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
 }
+
 .swiper-scrollbar.swiper-scrollbar-vertical,
 .swiper-vertical > .swiper-scrollbar {
   position: absolute;
@@ -558,6 +645,7 @@ button.swiper-pagination-bullet {
   width: var(--swiper-scrollbar-size, 4px);
   height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
 }
+
 .swiper-scrollbar-drag {
   height: 100%;
   width: 100%;
@@ -567,12 +655,15 @@ button.swiper-pagination-bullet {
   left: 0;
   top: 0;
 }
+
 .swiper-scrollbar-cursor-drag {
   cursor: move;
 }
+
 .swiper-scrollbar-lock {
   display: none;
 }
+
 .swiper-zoom-container {
   width: 100%;
   height: 100%;
@@ -587,6 +678,7 @@ button.swiper-pagination-bullet {
   align-items: center;
   text-align: center;
 }
+
 .swiper-zoom-container > canvas,
 .swiper-zoom-container > img,
 .swiper-zoom-container > svg {
@@ -595,11 +687,13 @@ button.swiper-pagination-bullet {
   -o-object-fit: contain;
   object-fit: contain;
 }
+
 .swiper-slide-zoomed {
   cursor: move;
   -ms-touch-action: none;
   touch-action: none;
 }
+
 .swiper .swiper-notification,
 swiper-container .swiper-notification {
   position: absolute;
@@ -609,15 +703,18 @@ swiper-container .swiper-notification {
   opacity: 0;
   z-index: -1000;
 }
+
 .swiper-free-mode > .swiper-wrapper {
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
   margin: 0 auto;
 }
+
 .swiper-grid > .swiper-wrapper {
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
+
 .swiper-grid-column > .swiper-wrapper {
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -626,25 +723,31 @@ swiper-container .swiper-notification {
   -ms-flex-direction: column;
   flex-direction: column;
 }
+
 .swiper-fade.swiper-free-mode .swiper-slide {
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
 }
+
 .swiper-fade .swiper-slide {
   pointer-events: none;
   -webkit-transition-property: opacity;
   transition-property: opacity;
 }
+
 .swiper-fade .swiper-slide .swiper-slide {
   pointer-events: none;
 }
+
 .swiper-fade .swiper-slide-active,
 .swiper-fade .swiper-slide-active .swiper-slide-active {
   pointer-events: auto;
 }
+
 .swiper-cube {
   overflow: visible;
 }
+
 .swiper-cube .swiper-slide {
   pointer-events: none;
   -webkit-backface-visibility: hidden;
@@ -656,17 +759,21 @@ swiper-container .swiper-notification {
   width: 100%;
   height: 100%;
 }
+
 .swiper-cube .swiper-slide .swiper-slide {
   pointer-events: none;
 }
+
 .swiper-cube.swiper-rtl .swiper-slide {
   -webkit-transform-origin: 100% 0;
   transform-origin: 100% 0;
 }
+
 .swiper-cube .swiper-slide-active,
 .swiper-cube .swiper-slide-active .swiper-slide-active {
   pointer-events: auto;
 }
+
 .swiper-cube .swiper-slide-active,
 .swiper-cube .swiper-slide-next,
 .swiper-cube .swiper-slide-next + .swiper-slide,
@@ -674,6 +781,7 @@ swiper-container .swiper-notification {
   pointer-events: auto;
   visibility: visible;
 }
+
 .swiper-cube .swiper-slide-shadow-bottom,
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right,
@@ -682,6 +790,7 @@ swiper-container .swiper-notification {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
+
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
   left: 0;
@@ -691,9 +800,10 @@ swiper-container .swiper-notification {
   opacity: 0.6;
   z-index: 0;
 }
+
 .swiper-cube .swiper-cube-shadow:before {
   content: "";
-  background: #000;
+  background: var(--grayscale-black);
   position: absolute;
   left: 0;
   top: 0;
@@ -702,22 +812,27 @@ swiper-container .swiper-notification {
   -webkit-filter: blur(50px);
   filter: blur(50px);
 }
+
 .swiper-flip {
   overflow: visible;
 }
+
 .swiper-flip .swiper-slide {
   pointer-events: none;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   z-index: 1;
 }
+
 .swiper-flip .swiper-slide .swiper-slide {
   pointer-events: none;
 }
+
 .swiper-flip .swiper-slide-active,
 .swiper-flip .swiper-slide-active .swiper-slide-active {
   pointer-events: auto;
 }
+
 .swiper-flip .swiper-slide-shadow-bottom,
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right,
@@ -726,6 +841,7 @@ swiper-container .swiper-notification {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
+
 .swiper-creative .swiper-slide {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
@@ -735,9 +851,11 @@ swiper-container .swiper-notification {
   transition-property: transform, opacity, height;
   transition-property: transform, opacity, height, -webkit-transform;
 }
+
 .swiper-cards {
   overflow: visible;
 }
+
 .swiper-cards .swiper-slide {
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
@@ -745,21 +863,30 @@ swiper-container .swiper-notification {
   backface-visibility: hidden;
   overflow: hidden;
 }
+
+/**
+ * Mixin for fluid type.
+ * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
+ */
+
 * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
+
 .swiper-slide {
   display: grid;
   height: auto;
   align-self: stretch;
 }
+
 .hero-carousel-container {
   border-bottom: 1px solid var(--grayscale-medium-dark);
   margin: 1.5rem 0;
   --button-size: 35px;
   --button-offset: 0px;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel-container {
     border: none;
@@ -769,6 +896,7 @@ swiper-container .swiper-notification {
     padding: 0 10px;
   }
 }
+
 .hero-carousel-container .swiper-button-prev,
 .hero-carousel-container .swiper-button-next {
   -webkit-box-align: center;
@@ -788,6 +916,7 @@ swiper-container .swiper-notification {
   width: var(--button-size);
   z-index: 9;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel-container .swiper-button-prev,
   .hero-carousel-container .swiper-button-next {
@@ -799,15 +928,18 @@ swiper-container .swiper-notification {
     background-color: var(--brand-main-active);
   }
 }
+
 .hero-carousel-container .swiper-button-prev::after,
 .hero-carousel-container .swiper-button-next::after {
   display: none;
 }
+
 .swiper .hero-carousel-container .swiper-button-prev-fade .swiper-slide-prev, .swiper .hero-carousel-container .swiper-button-prev-fade .swiper-slide-next,
 .swiper .hero-carousel-container .swiper-button-next-fade .swiper-slide-prev,
 .swiper .hero-carousel-container .swiper-button-next-fade .swiper-slide-next {
   z-index: -1;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel-container .swiper-button-next {
     bottom: 50%;
@@ -817,6 +949,7 @@ swiper-container .swiper-notification {
     transform: translateY(-50%);
   }
 }
+
 @media (min-width: 60rem) {
   .hero-carousel-container .swiper-button-prev {
     bottom: 50%;
@@ -826,32 +959,39 @@ swiper-container .swiper-notification {
     transform: translateY(-50%);
   }
 }
+
 .hero-carousel-container .arrow svg {
   display: none;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel-container .arrow svg {
     display: block;
   }
 }
+
 .hero-carousel-container .caret svg {
   display: block;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel-container .caret svg {
     display: none;
   }
 }
+
 .hero-carousel-container svg {
   fill: var(--grayscale-medium-dark);
   height: 16px;
   width: 16px;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel-container svg {
     fill: var(--grayscale-white);
   }
 }
+
 .hero-carousel--controls {
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -871,6 +1011,7 @@ swiper-container .swiper-notification {
   position: relative;
   width: 100%;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel--controls {
     display: block;
@@ -880,6 +1021,7 @@ swiper-container .swiper-notification {
     width: auto;
   }
 }
+
 .hero-carousel--pagination--mobile {
   bottom: auto !important;
   display: -webkit-box;
@@ -895,16 +1037,19 @@ swiper-container .swiper-notification {
   top: auto !important;
   width: 100px !important;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel--pagination--mobile {
     display: none;
   }
 }
+
 .hero-carousel--controls__buttons {
   position: relative;
   margin-right: -15px;
   width: 100px;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel--controls__buttons {
     margin: 0;
@@ -912,6 +1057,7 @@ swiper-container .swiper-notification {
     width: auto;
   }
 }
+
 .hero-carousel--pagination__bullet {
   background-color: var(--grayscale-medium);
   content: "";
@@ -919,9 +1065,11 @@ swiper-container .swiper-notification {
   height: 12px;
   width: 12px;
 }
+
 .hero-carousel--pagination__bullet--active {
   background-color: var(--brand-main-active);
 }
+
 .hero-carousel--item__pagination ul {
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -935,6 +1083,7 @@ swiper-container .swiper-notification {
   padding: 0;
   gap: 1rem;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel--item__pagination ul {
     display: -webkit-box;
@@ -942,6 +1091,7 @@ swiper-container .swiper-notification {
     display: flex;
   }
 }
+
 .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -953,6 +1103,7 @@ swiper-container .swiper-notification {
   -ms-flex-preferred-size: 33.3333333333%;
   flex-basis: 33.3333333333%;
 }
+
 .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button {
   font-size: 1.125rem;
   line-height: 24px;
@@ -980,10 +1131,12 @@ swiper-container .swiper-notification {
   opacity: 0.8;
   text-align: left;
 }
+
 .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button:is(:hover, :focus) {
   cursor: pointer;
   opacity: 1;
 }
+
 .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button .hero-carousel--item__pagination__button__theme {
   font-size: 0.875rem;
   line-height: 18px;
@@ -994,9 +1147,11 @@ swiper-container .swiper-notification {
   text-align: left;
   margin-bottom: 0.4rem;
 }
+
 .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button.is-current button {
   opacity: 1;
 }
+
 .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button.is-current button:after {
   border-bottom: 4px solid var(--grayscale-white, #FFF);
   content: "";
@@ -1004,6 +1159,7 @@ swiper-container .swiper-notification {
   margin-top: 0.45rem;
   width: 33.3333333333%;
 }
+
 .hero-carousel--item {
   display: grid;
   -webkit-box-orient: vertical;
@@ -1013,12 +1169,14 @@ swiper-container .swiper-notification {
   height: auto;
   align-self: stretch;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel--item {
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
 }
+
 .hero-carousel--item__content {
   background-color: var(--brand-main);
   display: -webkit-box;
@@ -1033,84 +1191,84 @@ swiper-container .swiper-notification {
   justify-content: center;
   padding: 1rem 0.95rem;
 }
+
 @media (min-width: 48rem) {
   .hero-carousel--item__content {
     padding: clamp(15px, 8%, 62px) clamp(24px, 10%, 52px) clamp(15px, 8%, 55px) clamp(24px, 10%, 52px);
   }
 }
+
 @media (min-width: 1601px) {
   .hero-carousel--item__content {
     padding: clamp(15px, 10%, 72px) clamp(24px, 15%, 102px) clamp(15px, 10%, 65px) clamp(24px, 15%, 102px);
   }
 }
+
 .hero-carousel--item__content hy-cta-button {
   margin-bottom: 30px;
 }
+
 @media (min-width: 48rem) {
   .hero-carousel--item__content hy-cta-button {
     margin-bottom: 48px;
   }
 }
+
 @media (min-width: 75.0625rem) {
   .hero-carousel--item__content hy-cta-button {
     margin-bottom: 60px;
   }
 }
+
 .hero-carousel--item__title {
-  font-size: 26px;
-  line-height: 32px;
-  color: var(--grayscale-white);
-  font-family: var(--main-font-family);
-  font-weight: 700;
-  letter-spacing: -0.5px;
-  margin: 1rem 0;
+  color: var(--ds-palette-white);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-40);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: -1.2px;
+  font-stretch: var(--ds-fontWidth-normal);
+  line-height: 48px;
   text-transform: uppercase;
-  text-wrap: balance;
-}
-@media (min-width: 48rem) {
-  .hero-carousel--item__title {
-    font-size: 30px;
-    line-height: 36px;
-  }
-}
-@media (min-width: 48rem) and (min-width: 480px) {
-  .hero-carousel--item__title {
-    font-size: calc(
-        30px + 20 * (100vw - 480px) / 1120
-      );
-  }
-}
-@media (min-width: 48rem) and (min-width: 1600px) {
-  .hero-carousel--item__title {
-    font-size: 50px;
-  }
-}
-@media (min-width: 48rem) and (min-width: 480px) {
-  .hero-carousel--item__title {
-    line-height: calc(
-        36px + 19 * (100vw - 480px) / 1120
-      );
-  }
-}
-@media (min-width: 48rem) and (min-width: 1600px) {
-  .hero-carousel--item__title {
-    line-height: 55px;
-  }
-}
-@media (min-width: 1701px) {
+  margin: 1rem 0;
+  /*   font-size: 26px;
+    line-height: 32px;
+    color: var(--grayscale-white);
+    font-family: var(--main-font-family);
+    font-weight: 700;
+    letter-spacing: -0.5px;
+
+    text-transform: uppercase;
+    text-wrap: balance;
+
+    @include breakpoint($medium) {
+      @include fluid-type(font-size, 480px, 1600px, 30px, 50px);
+      @include fluid-type(line-height, 480px, 1600px, 36px, 55px);
+    }
+
+    @include breakpoint($xlarge + 100px) {
+    } */
+}
+
+@media (min-width: 60rem) {
   .hero-carousel--item__title {
-    font-size: 54px;
-    line-height: 60px;
+    font-size: var(--ds-fontSize-56);
+    letter-spacing: var(--ds-letterSpacing-tight);
+    line-height: 64px;
+    font-stretch: var(--ds-fontWidth-condense);
   }
 }
+
 .hero-carousel--item__desc {
-  font-size: 0.9375rem;
-  line-height: 22px;
+  color: var(--ds-palette-black-95);
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
   color: var(--grayscale-white);
   display: -webkit-box;
-  font-family: var(--main-font-family);
   font-style: normal;
   line-clamp: 3;
   margin-bottom: 2rem;
@@ -1118,14 +1276,19 @@ swiper-container .swiper-notification {
   text-overflow: ellipsis;
   text-wrap: pretty;
 }
+
+@media (min-width: 60rem) {
+  .hero-carousel--item__desc {
+    font-size: var(--ds-fontSize-22);
+  }
+}
+
 @media (min-width: 60rem) {
   .hero-carousel--item__desc {
-    font-size: 1.0625rem;
-    line-height: 26px;
-    font-weight: 400;
     margin-bottom: 2.5rem;
   }
 }
+
 .hero-carousel--item__image {
   --swiper-preloader-color: var(--brand-main-light);
   position: relative;
@@ -1133,6 +1296,7 @@ swiper-container .swiper-notification {
   -ms-flex-order: -1;
   order: -1;
 }
+
 @media (min-width: 60rem) {
   .hero-carousel--item__image {
     -webkit-box-ordinal-group: 3;
@@ -1141,12 +1305,14 @@ swiper-container .swiper-notification {
     margin: 10px 0;
   }
 }
+
 .hero-carousel--item__image .hy-image__image {
   display: block;
   height: 100%;
   min-height: 205px;
   width: 100%;
 }
+
 .hero-carousel--item__image img {
   -o-object-fit: cover;
   object-fit: cover;