@duetds/components 10.5.0 → 10.7.0

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

@@ -149,7 +149,17 @@
   height: 220px;
   margin: 0 auto;
 }
+.duet-hero.duet-hero-campaign .background picture, .duet-hero.duet-hero-section .background picture {
+  display: block;
+  height: 100%;
+}
+@media (min-width: 1440px) {
+  .duet-hero.duet-hero-campaign .background picture, .duet-hero.duet-hero-section .background picture {
+    height: auto;
+  }
+}
 .duet-hero.duet-hero-campaign .background img, .duet-hero.duet-hero-section .background img {
+  display: block;
   height: 100%;
 }
 .duet-hero.duet-hero-campaign .background img.cover, .duet-hero.duet-hero-section .background img.cover {
@@ -607,11 +617,19 @@
   z-index: 1;
   width: 600px;
   height: 256px;
-  background-repeat: no-repeat;
-  background-position: 40px;
-  background-size: 100%;
   transform: rotate(-7deg) translate(-50%, 0);
 }
+.duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg picture {
+  display: block;
+}
+.duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg img {
+  position: absolute;
+  top: 50%;
+  left: 40px;
+  width: 100%;
+  height: auto;
+  transform: translateY(-50%);
+}
 @media (max-width: 35.9375em) {
   .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
     width: 520px;
@@ -1079,10 +1097,18 @@
   z-index: 1;
   width: 600px;
   height: 256px;
-  background-repeat: no-repeat;
-  background-size: 100%;
   transform: rotate(-7deg) translate(-50%, 0);
 }
+.duet-hero.duet-hero-content .background .brand-shaped-image .brand-shaped-image-bg picture {
+  display: block;
+}
+.duet-hero.duet-hero-content .background .brand-shaped-image .brand-shaped-image-bg img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+}
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content .background .brand-shaped-image .brand-shaped-image-bg {
     width: 733px;
@@ -1243,14 +1269,32 @@
 }
 
 .duet-hero:not(.duet-hero-with-image) .duet-hero-image {
+  position: relative;
   width: 100%;
   max-width: 400px;
   height: 0;
   padding-bottom: 50%;
   margin: 28px auto 0;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-size: contain;
+}
+.duet-hero:not(.duet-hero-with-image) .duet-hero-image picture {
+  display: block;
+}
+.duet-hero:not(.duet-hero-with-image) .duet-hero-image img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: 50% 50%;
+}
+.duet-hero:not(.duet-hero-with-image) .duet-hero-image img.cover {
+  object-fit: cover;
+}
+.duet-hero:not(.duet-hero-with-image) .duet-hero-image img.center {
+  object-position: center;
 }
 @media (min-width: 36em) {
   .duet-hero:not(.duet-hero-with-image) .duet-hero-image {
@@ -1339,11 +1383,22 @@
   left: -5%;
   width: 110%;
   height: 110%;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-size: cover;
   transform: rotate(-10deg);
 }
+.duet-hero-image-wrapper .duet-hero-image picture {
+  display: block;
+}
+.duet-hero-image-wrapper .duet-hero-image img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
 
 .duet-hero-image-mask {
   position: relative;
@@ -1540,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;
@@ -1567,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;
@@ -1575,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;
@@ -1583,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;
@@ -1700,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;
@@ -1709,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%;
@@ -1732,70 +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%;
-  background-position: 0;
-  background-size: cover;
+  transform: none;
+}
+.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-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;
@@ -1806,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;
@@ -1867,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;
@@ -1886,157 +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;
-  background-size: cover;
   transform: none;
 }
-.duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
+.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-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-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);
 }