@duetds/components 10.6.0 → 10.7.0

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

@@ -1595,21 +1595,21 @@ duet-heading + duet-button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background: rgb(230, 23, 64);
 }
-.duet-hero.duet-hero-light.duet-theme-turva, .duet-hero.duet-hero-with-image.duet-theme-turva {
+.duet-hero.duet-theme-turva.duet-hero-light, .duet-hero.duet-theme-turva.duet-hero-with-image {
   color: rgb(23, 42, 59);
   background-image: linear-gradient(rgb(253, 247, 242), #fefbf9);
 }
-.duet-hero.duet-hero-light.duet-theme-turva::before, .duet-hero.duet-hero-with-image.duet-theme-turva::before {
+.duet-hero.duet-theme-turva.duet-hero-light::before, .duet-hero.duet-theme-turva.duet-hero-with-image::before {
   background-image: linear-gradient(#fefbf9, rgb(255, 255, 255));
 }
-.duet-hero.duet-hero-gray.duet-theme-turva {
+.duet-hero.duet-theme-turva.duet-hero-gray {
   background: rgb(245, 246, 247);
 }
-.duet-hero.duet-hero-campaign.duet-theme-turva, .duet-hero.duet-hero-section.duet-theme-turva {
+.duet-hero.duet-theme-turva.duet-hero-campaign, .duet-hero.duet-theme-turva.duet-hero-section {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background: none;
 }
-.duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+.duet-hero.duet-theme-turva.duet-hero-campaign .brand-shape, .duet-hero.duet-theme-turva.duet-hero-section .brand-shape {
   top: 125px;
   left: -10px;
   width: 350px;
@@ -1622,7 +1622,7 @@ duet-heading + duet-button {
   transform: none;
 }
 @media (min-width: 22.5em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .brand-shape, .duet-hero.duet-theme-turva.duet-hero-section .brand-shape {
     top: 143px;
     left: -30px;
     width: 450px;
@@ -1630,7 +1630,7 @@ duet-heading + duet-button {
   }
 }
 @media (min-width: 36em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .brand-shape, .duet-hero.duet-theme-turva.duet-hero-section .brand-shape {
     top: 180px;
     left: 0;
     width: 550px;
@@ -1638,114 +1638,114 @@ duet-heading + duet-button {
   }
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .brand-shape, .duet-hero.duet-theme-turva.duet-hero-section .brand-shape {
     top: 220px;
     width: 712.18px;
     height: 712.18px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .brand-shape, .duet-hero.duet-theme-turva.duet-hero-section .brand-shape {
     top: 230px;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .brand-shape, .duet-hero.duet-theme-turva.duet-hero-section .brand-shape {
     top: 260px;
   }
 }
 @media (min-width: 106.25em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .brand-shape, .duet-hero.duet-theme-turva.duet-hero-section .brand-shape {
     top: 290px;
   }
 }
-.duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-.duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-.duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text duet-paragraph {
+.duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+.duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text .duet-hero-subheading,
+.duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text duet-paragraph {
   width: 98%;
 }
 @media (min-width: 22.5em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text duet-paragraph {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text duet-paragraph {
     width: 90%;
   }
 }
 @media (min-width: 25em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text duet-paragraph {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text duet-paragraph {
     width: 78%;
   }
 }
 @media (min-width: 30em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text duet-paragraph {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text duet-paragraph {
     width: 66%;
   }
 }
 @media (min-width: 36em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text duet-paragraph {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text duet-paragraph {
     width: 65%;
   }
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text duet-paragraph {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text duet-paragraph {
     width: 70%;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text .duet-hero-subheading,
-  .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-text duet-paragraph {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-text duet-paragraph {
     width: 52%;
   }
 }
-.duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+.duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-heading {
   margin-bottom: 2rem;
 }
 @media (min-width: 22.5em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-heading {
     margin-bottom: 2rem;
   }
 }
 @media (min-width: 36em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-heading {
     margin-bottom: 4rem;
   }
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-heading {
     margin-bottom: 6rem;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-heading {
     margin-bottom: 7rem;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-heading {
     margin-bottom: 8rem;
   }
 }
 @media (min-width: 106.25em) {
-  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+  .duet-hero.duet-theme-turva.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-theme-turva.duet-hero-section .duet-hero-heading {
     margin-botton: 9rem;
   }
 }
-.duet-hero.duet-hero-campaign.duet-theme-turva .background-area .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .background-area .brand-shape {
+.duet-hero.duet-theme-turva.duet-hero-campaign .background-area .brand-shape, .duet-hero.duet-theme-turva.duet-hero-section .background-area .brand-shape {
   left: 0;
   background-color: rgb(255, 255, 255);
   border-radius: 24px;
   mask-image: none;
 }
-.duet-hero.duet-hero-product.duet-theme-turva {
+.duet-hero.duet-theme-turva.duet-hero-product {
   display: flex;
   flex-direction: column;
   gap: 20px;
@@ -1755,7 +1755,7 @@ duet-heading + duet-button {
   margin: 0 auto;
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva {
+  .duet-hero.duet-theme-turva.duet-hero-product {
     flex-direction: row-reverse;
     gap: 40px;
     padding-top: 72px;
@@ -1764,19 +1764,19 @@ duet-heading + duet-button {
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product.duet-theme-turva {
+  .duet-hero.duet-theme-turva.duet-hero-product {
     max-width: 1110px;
     padding-right: 0;
     padding-left: 0;
   }
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area {
   position: relative;
   height: auto;
   overflow: visible;
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid {
   position: relative;
   top: 0;
   width: 100%;
@@ -1787,82 +1787,83 @@ duet-heading + duet-button {
   /* stylelint-disable max-nesting-depth */
 }
 @media (min-width: 36em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid {
     height: 250px;
     aspect-ratio: auto;
   }
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid {
     padding-right: 28px;
     padding-left: 28px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid {
     height: auto;
     aspect-ratio: 53/32;
     padding-right: 0;
     padding-left: 0;
   }
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background {
   position: relative;
   top: auto;
   height: 100%;
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .background-mask,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .background-mask {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .background-mask,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .background-mask {
   display: none;
   background-image: none;
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
   position: static;
   width: 100%;
   height: 100%;
   border-radius: 0;
   mask-image: none;
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg {
   position: static;
   width: 100%;
   height: 100%;
   transform: none;
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg picture,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg picture {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg picture,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg picture {
   display: block;
   width: 100%;
   height: 100%;
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg img,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg img {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg img,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg img {
   position: static;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 0 50%;
+  transform: none;
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
     border-radius: 0 0 12px 12px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-image,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-image {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
     border-radius: 12px;
   }
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-icon,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-icon {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
   top: auto;
   right: 20px;
   bottom: -16px;
@@ -1873,56 +1874,56 @@ duet-heading + duet-button {
   border-radius: 8px;
   mask-image: none;
 }
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-icon duet-icon,
-.duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-icon duet-icon {
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon duet-icon,
+.duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon duet-icon {
   top: 0;
   width: 62px;
   height: 62px;
 }
 @media (min-width: 36em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-icon,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-icon {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
     right: 40px;
     bottom: -24px;
     padding: 8px;
   }
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-icon duet-icon,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-icon duet-icon {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon duet-icon,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon duet-icon {
     width: 80px;
     height: 80px;
   }
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-icon,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-icon {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
     right: 68px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.narrow .background .brand-shaped-icon,
-  .duet-hero.duet-hero-product.duet-theme-turva .background-area .background-container.fluid .background .brand-shaped-icon {
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  .duet-hero.duet-theme-turva.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
     right: 40px;
   }
 }
-.duet-hero.duet-hero-product.duet-theme-turva .duet-hero-wrapper .duet-hero-text {
+.duet-hero.duet-theme-turva.duet-hero-product .duet-hero-wrapper .duet-hero-text {
   width: 100%;
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .duet-hero-wrapper {
+  .duet-hero.duet-theme-turva.duet-hero-product .duet-hero-wrapper {
     margin-top: 28px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .duet-hero-wrapper {
+  .duet-hero.duet-theme-turva.duet-hero-product .duet-hero-wrapper {
     padding: 0;
   }
 }
-.duet-hero.duet-hero-content.duet-theme-turva {
+.duet-hero.duet-theme-turva.duet-hero-content {
   padding: 0;
   margin: 20px auto;
   background: rgb(255, 255, 255);
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-mask {
+.duet-hero.duet-theme-turva.duet-hero-content .background-mask {
   position: absolute;
   top: 0;
   left: 0;
@@ -1934,11 +1935,11 @@ duet-heading + duet-button {
   background-repeat: no-repeat;
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-content.duet-theme-turva .background-mask {
+  .duet-hero.duet-theme-turva.duet-hero-content .background-mask {
     left: 181px;
   }
 }
-.duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
+.duet-hero.duet-theme-turva.duet-hero-content .brand-shaped-image {
   top: -155px;
   right: 0;
   left: 0;
@@ -1953,168 +1954,180 @@ duet-heading + duet-button {
   transform: none;
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
+  .duet-hero.duet-theme-turva.duet-hero-content .brand-shaped-image {
     top: -230px;
     width: 687px;
     height: 637px;
   }
 }
-.duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image .brand-shaped-image-bg {
+.duet-hero.duet-theme-turva.duet-hero-content .brand-shaped-image .brand-shaped-image-bg {
   width: 600px;
   height: 280px;
   transform: translate(-50%, 0);
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image .brand-shaped-image-bg {
+  .duet-hero.duet-theme-turva.duet-hero-content .brand-shaped-image .brand-shaped-image-bg {
     width: 733px;
     height: 413px;
   }
 }
-.duet-hero.duet-hero-content.duet-theme-turva.duet-hero-narrow .background-area {
+.duet-hero.duet-theme-turva.duet-hero-content.duet-hero-narrow .background-area {
   max-width: 888px;
 }
 @media (min-width: 36em) {
-  .duet-hero.duet-hero-content.duet-theme-turva.duet-hero-narrow .background-area {
+  .duet-hero.duet-theme-turva.duet-hero-content.duet-hero-narrow .background-area {
     padding: 0 48px;
   }
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-content.duet-theme-turva.duet-hero-narrow .background-area {
+  .duet-hero.duet-theme-turva.duet-hero-content.duet-hero-narrow .background-area {
     padding: 0 72px;
   }
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-area {
+.duet-hero.duet-theme-turva.duet-hero-content .background-area {
   position: static;
   padding: 0 16px;
   margin: 0 auto;
 }
 @media (min-width: 36em) {
-  .duet-hero.duet-hero-content.duet-theme-turva .background-area {
+  .duet-hero.duet-theme-turva.duet-hero-content .background-area {
     padding: 0 28px;
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-content.duet-theme-turva .background-area {
+  .duet-hero.duet-theme-turva.duet-hero-content .background-area {
     padding: 0 56px;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-content.duet-theme-turva .background-area {
+  .duet-hero.duet-theme-turva.duet-hero-content .background-area {
     max-width: 1110px;
     padding: 0;
   }
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-area .background {
+.duet-hero.duet-theme-turva.duet-hero-content .background-area .background {
   position: static;
   height: auto;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-area .background .background-mask {
+.duet-hero.duet-theme-turva.duet-hero-content .background-area .background .background-mask {
   display: none;
   background-image: none;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-area .background .brand-shaped-image {
+.duet-hero.duet-theme-turva.duet-hero-content .background-area .background .brand-shaped-image {
   position: static;
   width: auto;
   height: auto;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-area .background .brand-shaped-image .brand-shaped-image-wrapper {
+.duet-hero.duet-theme-turva.duet-hero-content .background-area .background .brand-shaped-image .brand-shaped-image-wrapper {
   width: auto;
   height: auto;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-area .background .brand-shaped-image .brand-shaped-image-bg {
+.duet-hero.duet-theme-turva.duet-hero-content .background-area .background .brand-shaped-image .brand-shaped-image-bg {
   position: static;
   width: 100%;
   height: auto;
   aspect-ratio: 5/2;
   transform: none;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-area .background .brand-shaped-image .brand-shaped-image-bg picture {
+.duet-hero.duet-theme-turva.duet-hero-content .background-area .background .brand-shaped-image .brand-shaped-image-bg picture {
   display: block;
   width: 100%;
   height: 100%;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .background-area .background .brand-shaped-image .brand-shaped-image-bg img {
+.duet-hero.duet-theme-turva.duet-hero-content .background-area .background .brand-shaped-image .brand-shaped-image-bg img {
   position: static;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
+.duet-hero.duet-theme-turva.duet-hero-content .brand-shaped-image {
   border-radius: 12px;
   mask-image: none;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .duet-hero-wrapper {
+.duet-hero.duet-theme-turva.duet-hero-content .duet-hero-wrapper {
   margin-top: 28px;
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-hero-content.duet-theme-turva .duet-hero-wrapper {
+  .duet-hero.duet-theme-turva.duet-hero-content .duet-hero-wrapper {
     margin-top: 36px;
   }
 }
-.duet-hero.duet-theme-turva .duet-hero-wrapper {
-  position: static;
-  margin-top: 16px;
+.duet-hero.duet-theme-turva.duet-hero-with-image {
+  padding-top: 0;
+}
+.duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-mask {
+  margin: 0;
+}
+@media screen and (min-width: 1450px) {
+  .duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-mask {
+    transform: translateX(108%);
+  }
 }
 @media (min-width: 48em) {
-  .duet-hero.duet-theme-turva .duet-hero-wrapper {
-    margin-top: 0;
+  .duet-hero.duet-theme-turva.duet-hero-with-image {
+    padding-top: 48px;
   }
 }
-
-.duet-theme-turva .duet-hero-image-wrapper {
-  padding-bottom: 68%;
-  border-radius: 44% 47% 38% 54%;
+@media (min-width: 62em) {
+  .duet-hero.duet-theme-turva.duet-hero-with-image {
+    padding-top: 72px;
+  }
+}
+.duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-wrapper {
+  top: 0;
+  height: auto;
+  aspect-ratio: 16/10;
+  padding-bottom: 0;
+  margin: 36px auto;
+  border-radius: 16px;
   transform: none;
 }
 @media screen and (min-width: 440px) {
-  .duet-theme-turva .duet-hero-image-wrapper {
+  .duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-wrapper {
     width: 80%;
-    padding-bottom: 68%;
+  }
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-wrapper {
+    margin-top: 0;
   }
 }
 @media (min-width: 62em) {
-  .duet-theme-turva .duet-hero-image-wrapper {
-    top: -40px;
+  .duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-wrapper {
+    top: 72px;
     right: -80px;
     width: 536px;
-    padding-bottom: 470px;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-theme-turva .duet-hero-image-wrapper {
-    top: -70px;
+  .duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-wrapper {
     right: -60px;
     width: 650px;
-    padding-bottom: 600px;
   }
 }
 @media screen and (min-width: 1450px) {
-  .duet-theme-turva .duet-hero-image-wrapper {
+  .duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-wrapper {
     right: 0;
   }
 }
-.duet-theme-turva .duet-hero-image-wrapper .duet-hero-image {
+.duet-hero.duet-theme-turva.duet-hero-with-image .duet-hero-image-wrapper .duet-hero-image {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transform: none;
 }
-
-@media screen and (min-width: 1450px) {
-  .duet-theme-turva .duet-hero-image-mask {
-    transform: translateX(108%);
-  }
+.duet-hero.duet-theme-turva .duet-hero-wrapper {
+  position: static;
+  margin-top: 0;
 }
-
-.duet-theme-turva .duet-hero-link {
+.duet-hero.duet-theme-turva .duet-hero-link {
   color: rgb(230, 23, 64);
 }
-.duet-theme-turva .duet-hero-link:hover .duet-hero-action-arrow {
+.duet-hero.duet-theme-turva .duet-hero-link:hover .duet-hero-action-arrow {
   color: rgb(140, 0, 30) !important;
 }
-
-.duet-theme-turva .duet-hero-action-arrow {
+.duet-hero.duet-theme-turva .duet-hero-action-arrow {
   color: rgb(230, 23, 64);
 }