@duetds/components 9.0.1 → 9.1.0

package/lib/collection/components/duet-hero/duet-hero.css

@@ -553,22 +553,45 @@
 .duet-hero.duet-hero-product {
   position: relative;
   padding: 0 0 48px;
-  padding-top: 236px;
   margin: 0;
   background: rgb(255, 255, 255);
 }
+@media (max-width: 35.9375em) {
+  .duet-hero.duet-hero-product {
+    padding-top: 240px;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-hero.duet-hero-product {
+    padding-top: 200px;
+  }
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-product {
+    padding-top: 260px;
+  }
+}
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product {
     padding-top: 250px;
   }
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product {
+    min-height: 400px;
+    padding: 72px 0;
+  }
+}
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product {
-    min-height: 375px;
-    padding-top: 0;
+    min-height: 500px;
+    padding: 96px 0;
   }
-  .duet-hero.duet-hero-product.duet-hero-narrow {
-    padding-top: 200px;
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product {
+    min-height: 575px;
+    padding: 120px 0;
   }
 }
 .duet-hero.duet-hero-product .background-area {
@@ -578,14 +601,6 @@
   height: 600px;
   overflow: hidden;
 }
-@media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background-area {
-    top: -112px;
-  }
-  .duet-hero.duet-hero-product .background-area.narrow {
-    top: 0;
-  }
-}
 .duet-hero.duet-hero-product .background-container {
   position: absolute;
   top: -150px;
@@ -597,9 +612,6 @@
   .duet-hero.duet-hero-product .background-container {
     top: -48px;
   }
-  .duet-hero.duet-hero-product .background-container.narrow {
-    top: -160px;
-  }
 }
 .duet-hero.duet-hero-product .background {
   position: absolute;
@@ -621,12 +633,7 @@
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background.narrow {
-    top: 140px;
-  }
-}
-@media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background:not(.narrow) {
+  .duet-hero.duet-hero-product .background {
     position: absolute;
     right: 0;
     left: 0;
@@ -646,34 +653,75 @@
   border-radius: 20%;
   transform: rotate(7deg);
 }
+@media (max-width: 35.9375em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image {
+    top: -160px;
+    right: -60px;
+    width: 360px;
+    height: 360px;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image {
+    top: -120px;
+    right: -14px;
+    width: 290px;
+    height: 290px;
+  }
+}
 @media (min-width: 36em) {
   .duet-hero.duet-hero-product .background .brand-shaped-image {
-    right: 15%;
+    top: -175px;
+    right: -20px;
+    width: 400px;
+    height: 400px;
   }
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product .background .brand-shaped-image {
-    top: -210px;
-    width: 485px;
-    height: 485px;
+    top: -145px;
+    right: -150px;
+    width: 414px;
+    height: 414px;
+  }
+}
+@media (min-width: 860px) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image {
+    right: -105px;
+  }
+}
+@media (min-width: 960px) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image {
+    right: -45px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-image:not(.narrow) {
-    top: -353px;
-    right: -128.15px;
-    width: 520px;
-    height: 736px;
+  .duet-hero.duet-hero-product .background .brand-shaped-image {
+    top: -190px;
+    right: -150px;
+    width: 552px;
+    height: 552px;
+  }
+}
+@media (min-width: 1100px) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image {
+    right: -35px;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-image:not(.narrow) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image {
+    top: -300px;
+    right: -128px;
     width: 736px;
+    height: 736px;
+  }
+  .duet-hero.duet-hero-product .background .brand-shaped-image.narrow {
+    right: -160px;
   }
 }
-@media (min-width: 62em) {
+@media (min-width: 1300px) {
   .duet-hero.duet-hero-product .background .brand-shaped-image.narrow {
-    right: 30%;
+    right: -128px;
   }
 }
 .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-wrapper {
@@ -689,106 +737,217 @@
   width: 600px;
   height: 256px;
   background-repeat: no-repeat;
+  background-position: 40px;
   background-size: 100%;
   transform: rotate(-7deg) translate(-50%, 0);
 }
-@media (min-width: 48em) {
+@media (max-width: 35.9375em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
+    width: 520px;
+    height: 240px;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
+    width: 440px;
+    height: 200px;
+  }
+}
+@media (min-width: 36em) {
   .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
     width: 600px;
-    height: 320px;
+    height: 260px;
+  }
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
+    width: 500px;
+    height: 292px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg:not(.narrow) {
-    width: 800px;
-    height: 470px;
+  .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
+    width: 720px;
+    height: 420px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
+    width: 950px;
+    height: 540px;
   }
 }
 .duet-hero.duet-hero-product .background .brand-shape {
   position: absolute;
-  top: -20px;
-  right: 50%;
-  width: 240px;
-  height: 240px;
   background: rgb(230, 242, 248);
   border-radius: 25%;
   mix-blend-mode: normal;
   transform: rotate(7deg);
 }
+@media (max-width: 35.9375em) {
+  .duet-hero.duet-hero-product .background .brand-shape {
+    top: 20px;
+    right: 210px;
+    width: 200px;
+    height: 200px;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-hero.duet-hero-product .background .brand-shape {
+    top: 24px;
+    right: 199px;
+    width: 162px;
+    height: 162px;
+  }
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-product .background .brand-shape {
+    top: 25px;
+    right: 290px;
+    width: 220px;
+    height: 220px;
+  }
+}
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product .background .brand-shape {
-    top: -60px;
-    width: 340px;
-    height: 340px;
+    top: 90px;
+    right: 145px;
+    width: 225px;
+    height: 225px;
+  }
+}
+@media (min-width: 860px) {
+  .duet-hero.duet-hero-product .background .brand-shape {
+    right: 195px;
+  }
+}
+@media (min-width: 960px) {
+  .duet-hero.duet-hero-product .background .brand-shape {
+    right: 245px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shape:not(.narrow) {
-    top: auto;
-    top: 79px;
-    right: 200px;
-    width: 380px;
-    height: 380px;
+  .duet-hero.duet-hero-product .background .brand-shape {
+    top: 115px;
+    right: 228px;
+    width: 300px;
+    height: 300px;
+  }
+}
+@media (min-width: 1100px) {
+  .duet-hero.duet-hero-product .background .brand-shape {
+    right: 343px;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product .background .brand-shape:not(.narrow) {
-    right: 414px;
+  .duet-hero.duet-hero-product .background .brand-shape {
+    right: 394px;
     width: 400px;
     height: 400px;
   }
 }
 .duet-hero.duet-hero-product .background .brand-shaped-icon {
   position: absolute;
-  top: 160px;
-  right: 15%;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 85px;
-  height: 85px;
-  background: rgba(0, 119, 179, 0.75);
+  background: rgba(0, 119, 179, 0.85);
   border-radius: 25%;
   mix-blend-mode: normal;
   transform: rotate(7deg);
 }
+@media (max-width: 35.9375em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+    top: 165px;
+    right: 25px;
+    width: 69px;
+    height: 69px;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+    top: 138px;
+    right: 50px;
+    width: 57px;
+    height: 57px;
+  }
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+    top: 175px;
+    right: 125px;
+    width: 78px;
+    height: 78px;
+  }
+}
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product .background .brand-shaped-icon {
-    top: 180px;
-    width: 120px;
-    height: 120px;
+    top: 220px;
+    right: 60px;
   }
 }
-@media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-icon:not(.narrow) {
-    top: 292px;
-    right: 220px;
-    width: 150px;
-    height: 150px;
+@media (min-width: 860px) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+    right: 110px;
   }
 }
-@media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-icon:not(.narrow) {
-    top: 292px;
-    right: 220px;
-    width: 186px;
-    height: 186px;
+@media (min-width: 960px) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+    right: 160px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-icon.narrow {
-    right: 35%;
+  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+    top: 296px;
+    right: 120px;
+    width: 105px;
+    height: 105px;
+  }
+}
+@media (min-width: 1100px) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+    right: 235px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+    top: 345px;
+    right: 245px;
+    width: 140px;
+    height: 140px;
   }
 }
 .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon {
-  width: 80px;
-  height: 80px;
   transform: rotate(-7deg);
 }
+@media (max-width: 35.9375em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon {
+    width: 100%;
+    height: 100%;
+  }
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon {
+    width: 72px;
+    height: 72px;
+  }
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon {
+    width: 72px;
+    height: 72px;
+  }
+}
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon:not(.narrow) {
-    width: 120px;
-    height: 120px;
+  .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon {
+    width: 86px;
+    height: 86px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon {
+    width: 104px;
+    height: 104px;
   }
 }
 .duet-hero.duet-hero-product .duet-hero-wrapper {
@@ -798,22 +957,9 @@
 .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-text {
   margin-top: 0;
 }
-.duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-heading {
-  margin-top: 1rem;
-}
-@media (min-width: 48em) {
-  .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-heading {
-    margin-top: 2rem;
-  }
-}
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-heading {
-    margin-top: 7rem;
-  }
-}
-@media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-heading {
-    margin-top: 7rem;
+    margin-top: 0;
   }
 }
 .duet-hero.duet-hero-product .duet-hero-wrapper.fluid, .duet-hero.duet-hero-product .duet-hero-wrapper.narrow {
@@ -835,6 +981,11 @@
     padding: 0;
   }
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.fluid .duet-hero-text {
+    width: 60%;
+  }
+}
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product .duet-hero-wrapper.fluid .duet-hero-text {
     width: 50%;
@@ -858,19 +1009,19 @@
     padding: 0 72px;
   }
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.narrow .duet-hero-text {
+    width: 60%;
+  }
+}
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product .duet-hero-wrapper.narrow .duet-hero-text {
-    width: 80%;
+    width: 47%;
   }
 }
 .duet-hero.duet-hero-product.duet-theme-turva {
   background: rgb(255, 255, 255);
 }
-@media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva.duet-hero-narrow {
-    padding-top: 160px;
-  }
-}
 .duet-hero.duet-hero-product.duet-theme-turva .background .background-mask {
   position: absolute;
   top: 0;
@@ -887,11 +1038,6 @@
   }
 }
 .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
-  top: -185px;
-  right: 0;
-  left: 0;
-  width: 485px;
-  height: 485px;
   margin: 0 auto;
   border-radius: 0;
   transform: none;
@@ -900,57 +1046,76 @@
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
   mask-repeat: no-repeat;
 }
+@media (max-width: 35.9375em) {
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
+    top: -120px;
+    width: 385px;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
+    top: -95px;
+    width: 320px;
+  }
+}
 @media (min-width: 36em) {
   .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
-    right: 0;
+    top: -135px;
+    width: 420px;
   }
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
-    top: -165px;
-    right: 0;
+    top: -110px;
+    right: -110px;
+    width: 418px;
   }
 }
-@media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image.narrow {
-    right: 40%;
-    left: auto;
+@media (min-width: 860px) {
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
+    right: -75px;
+  }
+}
+@media (min-width: 960px) {
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
+    right: -40px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image:not(.narrow) {
-    top: -230px;
-    right: -180px;
-    left: auto;
-    width: 675px;
-    height: 675px;
-    margin: 0;
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
+    top: -130px;
+    right: -100px;
+    width: 552px;
+  }
+}
+@media (min-width: 1100px) {
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
+    right: -35px;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image:not(.narrow) {
-    right: -120px;
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image {
+    top: -215px;
     width: 736px;
   }
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image.narrow {
+    right: -115px;
+  }
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image .brand-shaped-image-bg {
-  width: 600px;
-  height: 320px;
-  transform: translate(-50%, 0);
-}
-@media (min-width: 48em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image .brand-shaped-image-bg {
-    width: 600px;
+@media (min-width: 1300px) {
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image.narrow {
+    right: -50px;
   }
 }
-@media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image .brand-shaped-image-bg:not(.narrow) {
-    width: 800px;
-    height: 470px;
+@media (min-width: 1400px) {
+  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image.narrow {
+    right: -35px;
   }
 }
+.duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-image .brand-shaped-image-bg {
+  transform: translate(-50%, 0);
+}
 .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon {
-  top: 175px;
   background: rgba(198, 12, 48, 0.9);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
   -webkit-mask-repeat: no-repeat;
@@ -960,50 +1125,17 @@
 }
 .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon duet-icon {
   position: relative;
-  top: -10px;
+  top: -6px;
   transform: rotate(0deg);
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon duet-icon {
-    top: -10px;
+    top: -8px;
   }
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon duet-icon {
-    top: -15px;
-  }
-}
-@media (min-width: 48em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon {
-    top: 180px;
-    right: 20%;
-  }
-}
-@media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon {
-    top: 292px;
-  }
-}
-@media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon {
-    top: 292px;
-  }
-}
-@media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon.narrow {
-    top: 192px;
-    right: 35%;
-  }
-}
-@media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon.narrow {
-    top: 192px;
-    right: 40%;
-  }
-}
-@media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background .brand-shaped-icon:not(.narrow) {
-    right: 340px;
+    top: -12px;
   }
 }
 .duet-hero.duet-hero-content {