@itcenteratunihelsinki/huds-lib 0.5.0 → 0.5.4

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

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;
@@ -61,117 +63,47 @@
 .hy-hero {
   position: relative;
   padding-bottom: 0;
-  /*
-   On pages without sidebar navigation
-  -- Between 960 - 1200 px: Side margins on full width banner elements are 8 px
-  -- Between 1201 - 1343 px: Side margins on full width banner elements are 12 px
-  -- 1344 px and above: Side margins on full width banner elements are 32 px
-  - On pages with sidebar navigation
-  -- Between 1201 - 1600 px: Side margins on full width banner elements are 8 px
-  -- Between 1601 - 1663 px: Side margins on full width banner elements are 12 px
-  -- 1664 px and above: Side margins on full width banner elements are 32 px
-   */
 }
 
 @media (min-width: 75.0625rem) {
-  .hy-hero--landing, .hy-hero--minor_landing {
-    margin: 8px 0;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero--landing, .hy-hero--minor_landing {
-    margin: 24px -20px;
-  }
-}
-
-@media (min-width: 1664px) {
-  .hy-hero--landing, .hy-hero--minor_landing {
-    margin: 24px 0;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero--landing .hy-hero__large, .hy-hero--minor_landing .hy-hero__large {
-    margin: 24px -20px;
-  }
-}
-
-@media (min-width: 1344px) {
-  .hy-hero--landing .hy-hero__large, .hy-hero--minor_landing .hy-hero__large {
-    margin: 24px 0;
-  }
-}
-
-.hy-hero--minor_landing {
-  margin: 0;
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero--minor_landing {
-    margin: 8px 0 0;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero--minor_landing {
-    max-width: 1216px;
-    margin: 24px auto 0 auto;
-  }
-}
-
-.hy-hero--front_page {
-  border-top: 1px solid rgba(0, 0, 0, 0.7);
-  border-bottom: 3px solid rgba(0, 0, 0, 0.7);
-  margin-left: 0;
-  margin-right: 0;
-}
-
-@media (min-width: 30rem) {
   .hy-hero--front_page {
-    border-bottom: 4px solid rgba(0, 0, 0, 0.7);
+    margin-left: -32px;
+    margin-right: -32px;
   }
 }
 
 @media (min-width: 60rem) {
-  .hy-hero--front_page {
-    padding: 0;
+  .hy-hero--white {
+    padding-top: 40px;
   }
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-hero--front_page {
-    margin-left: -32px;
-    margin-right: -32px;
-    margin-top: 0;
+@media (min-width: 60rem) {
+  .hy-hero--white:not(.has-shortcuts) {
+    padding-bottom: 48px;
   }
 }
 
-.hy-hero--white {
-  -webkit-box-shadow: inset 0 -2rem 2rem -2rem rgba(14, 104, 139, 0.1);
-  box-shadow: inset 0 -2rem 2rem -2rem rgba(14, 104, 139, 0.1);
-}
-
-@media (min-width: 30rem) {
-  .hy-hero--white {
-    -webkit-box-shadow: inset 0 -40px 40px -40px rgba(14, 104, 139, 0.1);
-    box-shadow: inset 0 -40px 40px -40px rgba(14, 104, 139, 0.1);
-  }
+.hy-hero--white:not(.has-shortcuts):after {
+  width: calc(100% - 32px);
+  background-color: var(--grayscale-medium-dark);
+  height: 1px;
+  content: "";
+  margin: 0 auto;
+  display: block;
 }
 
 @media (min-width: 60rem) {
-  .hy-hero--white {
-    background-color: var(--grayscale-white);
-    -webkit-box-shadow: inset 0 -8px 8px -8px rgba(14, 104, 139, 0.1);
-    box-shadow: inset 0 -8px 8px -8px rgba(14, 104, 139, 0.1);
+  .hy-hero--white:not(.has-shortcuts):after {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
   }
 }
 
-@media (min-width: 1601px) {
-  .hy-hero--white {
-    -webkit-box-shadow: inset 0 -24px 24px -24px rgba(14, 104, 139, 0.1);
-    box-shadow: inset 0 -24px 24px -24px rgba(14, 104, 139, 0.1);
-  }
+.hy-hero--white:not(.hy-hero--front_page):after {
+  max-width: 1216px;
 }
 
 .hy-hero__container {
@@ -187,636 +119,261 @@
   }
 }
 
-@media (min-width: 60rem) {
-  .hy-hero__container--front_page {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__container--landing {
-    margin-left: 8px;
-    margin-right: 8px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__container--landing {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__container--minor_landing {
-    margin-left: 32px;
-    margin-right: 32px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__container--minor_landing {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__container--minor_landing:not(.research_group) {
-    margin-bottom: 40px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__container--minor_landing:not(.research_group) {
-    margin-bottom: 64px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__container--minor_landing.research_group {
-    margin-bottom: 40px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__container--minor_landing.research_group {
-    margin-bottom: 40px;
-  }
-}
-
-.hy-hero__container--landing.hy-hero__container--white:not(.shortcuts):after {
-  border-bottom: 1px solid var(--grayscale-black);
-  content: " ";
-  bottom: -6px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  width: 100%;
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__container--landing.hy-hero__container--white:not(.shortcuts):after {
-    border-bottom: 1px solid var(--grayscale-black);
-    content: " ";
-    bottom: -2px;
-    left: 0;
-    position: absolute;
-    right: 0;
-    width: 100%;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__container--landing.hy-hero__container--white:not(.shortcuts):after {
-    bottom: -18px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__container--landing.hy-hero__container--white.large:not(.shortcuts):after {
-    bottom: -18px;
-  }
-}
-
-.hy-hero__container--minor_landing.hy-hero__container--white:not(.shortcuts):after {
-  border-bottom: 1px solid var(--grayscale-black);
-  content: " ";
-  bottom: -6px;
-  left: 0;
-  position: absolute;
-  right: 0;
+.hy-hero__content-container {
+  padding: 24px 1rem 40px;
+  margin: 0 auto;
   width: 100%;
 }
 
-@media (min-width: 60rem) {
-  .hy-hero__container--minor_landing.hy-hero__container--white:not(.shortcuts):after {
-    bottom: -40px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__container--minor_landing.hy-hero__container--white:not(.shortcuts):after {
-    bottom: -40px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__container--minor_landing.hy-hero__container--white:not(.shortcuts):after {
-    bottom: -64px;
-  }
-}
-
-.hy-hero__container--minor_landing.hy-hero__container--white.research_group:not(.shortcuts):after {
-  border-bottom: 3px solid rgba(0, 0, 0, 0.7);
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__container--minor_landing.hy-hero__container--white.research_group:not(.shortcuts):after {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.7);
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__container--minor_landing.hy-hero__container--white.research_group:not(.shortcuts):after {
-    bottom: -40px;
-  }
-}
-
 @media (min-width: 75.0625rem) {
-  .hy-hero__container--minor_landing.hy-hero__container--white.large:not(.shortcuts):not(.research_group):after {
-    bottom: -64px;
+  .without-sidebar .hy-hero__content-container {
+    padding: 80px 0;
   }
 }
 
-.hy-hero__content-container {
-  padding: 0 1rem 2rem;
-}
-
-.hy-hero__content-container--black {
-  background-color: var(--grayscale-black);
-}
-
-.hy-hero__content-container--blue {
-  background-color: var(--brand-main-light);
-}
-
-.hy-hero__content-container--white {
-  background-color: var(--grayscale-white);
-}
-
 @media (min-width: 30rem) {
   .hy-hero__content-container {
-    padding: 0 2rem 40px;
+    padding: 24px 2rem 40px;
   }
 }
 
 @media (min-width: 60rem) {
   .hy-hero__content-container {
-    background-color: transparent !important;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    margin: 0 auto;
-    min-height: 329px;
-    padding: 52px 2rem 52px calc(2rem - 8px);
-    position: relative;
-    width: 100%;
-  }
-}
-
-.hy-hero__content-container--landing {
-  padding: 0 1rem 2rem;
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__content-container--landing {
-    padding: 0 2rem 40px;
-  }
-}
-
-@media (min-width: 1060px) {
-  .hy-hero__content-container--landing {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
     min-height: 364px;
   }
 }
 
 @media (min-width: 1160px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 399px;
   }
 }
 
 @media (min-width: 75.0625rem) {
-  .hy-hero__content-container--landing {
-    padding: 80px 24px;
+  .hy-hero__content-container {
+    padding: 80px 32px;
   }
 }
 
 @media (min-width: 1260px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 346px;
   }
 }
 
 @media (min-width: 1360px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 374px;
   }
 }
 
 @media (min-width: 1460px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 402px;
   }
 }
 
 @media (min-width: 1560px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 430px;
   }
 }
 
 @media (min-width: 1601px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     max-width: 1216px;
     padding: 80px 0;
   }
 }
 
 @media (min-width: 1660px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 448px;
   }
 }
 
 @media (min-width: 1760px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 484px;
   }
 }
 
 @media (min-width: 1860px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 519px;
   }
 }
 
 @media (min-width: 1920px) {
-  .hy-hero__content-container--landing {
+  .hy-hero__content-container {
     min-height: 540px;
   }
 }
 
-@media (min-width: 60rem) {
-  .hy-hero__content-container--minor_landing {
-    width: 50%;
-    margin: 0;
-    padding: 52px 2rem 52px 0;
-  }
+.hy-hero--black .hy-hero__content-container {
+  background-color: var(--grayscale-black);
 }
 
-.hy-hero__content-container--front_page {
-  padding: 0 1rem 2rem;
+.hy-hero--blue .hy-hero__content-container {
+  background-color: var(--brand-main);
+}
+
+.hy-hero--white .hy-hero__content-container {
+  background-color: var(--grayscale-white);
+}
+
+.hy-hero--front_page .hy-hero__content-container {
+  padding: 24px 1rem 40px;
 }
 
 @media (min-width: 30rem) {
-  .hy-hero__content-container--front_page {
-    padding: 0 2rem 40px;
+  .hy-hero--front_page .hy-hero__content-container {
+    padding: 24px 2rem 40px;
   }
 }
 
 @media (min-width: 60rem) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
     min-height: 330px;
     padding: 56px 2rem;
   }
 }
 
 @media (min-width: 1060px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 373px;
   }
 }
 
 @media (min-width: 1160px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 480px;
   }
 }
 
 @media (min-width: 75.0625rem) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     padding-left: 32px;
     padding-right: 8px;
   }
 }
 
 @media (min-width: 1260px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 443px;
   }
 }
 
 @media (min-width: 1280px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     max-width: 1216px;
     padding-left: 0;
   }
 }
 
 @media (min-width: 1360px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 478px;
   }
 }
 
 @media (min-width: 1460px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 513px;
   }
 }
 
 @media (min-width: 1560px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 548px;
   }
 }
 
 @media (min-width: 1601px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     padding-left: 0;
   }
 }
 
 @media (min-width: 1660px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 583px;
   }
 }
 
 @media (min-width: 1760px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 619px;
   }
 }
 
 @media (min-width: 1860px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 654px;
   }
 }
 
 @media (min-width: 1920px) {
-  .hy-hero__content-container--front_page {
+  .hy-hero--front_page .hy-hero__content-container {
     min-height: 675px;
   }
 }
 
-.hy-hero__title-container {
+.hy-hero__content {
   position: relative;
 }
 
-@media (min-width: 30rem) {
-  .hy-hero__title-container {
-    max-width: 87%;
-  }
-}
-
 @media (min-width: 60rem) {
-  .hy-hero__title-container {
-    max-width: 48.75%;
-  }
-}
-
-.hy-hero__title-container--minor_landing {
-  max-width: 100%;
-}
-
-.hy-hero__title--blue h1 {
-  color: var(--grayscale-white) !important;
-}
-
-.hy-hero__title--black h1 {
-  color: var(--grayscale-white) !important;
-}
-
-.hy-hero__title--white h1 {
-  color: var(--grayscale-black);
-}
-
-.hy-hero__title h1 {
-  margin-bottom: 12px !important;
-  max-width: 100%;
-}
-
-.hy-hero__title h1:not(.hy-heading__landing_minor) {
-  display: inline-block !important;
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__title h1 {
-    margin-bottom: 16px !important;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__title h1 {
-    margin-bottom: 0 !important;
-  }
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__title h1 span {
-    padding-bottom: 16px;
+  .hy-hero__content {
     padding-right: 24px;
   }
 }
 
 @media (min-width: 60rem) {
-  .hy-hero__title h1 span {
-    padding-bottom: 23px;
-    padding-right: 32px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__title h1 span {
-    padding-bottom: 30px;
-    padding-right: 40px;
-  }
-}
-
-.hy-hero__title h1.hy-heading__landing_minor span {
-  padding-top: 16px;
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__title h1.hy-heading__landing_minor span {
-    padding-top: 24px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__title h1.hy-heading__landing_minor span {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}
-
-.hy-hero__title h1:not(.hy-heading__landing_minor) span {
-  padding-top: 9px;
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__title h1:not(.hy-heading__landing_minor) span {
-    padding-top: 16px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__title h1:not(.hy-heading__landing_minor) span {
-    padding-top: 19px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__title h1:not(.hy-heading__landing_minor) span {
-    padding-top: 28px;
-  }
-}
-
-.hy-hero__title:not(.hy-hero__title--overlay) {
-  position: relative;
-  z-index: 10;
-}
-
-.hy-hero__title:not(.hy-hero__title--overlay) .hy-hero__title:not(.hy-hero__title--overlay) --blue span {
-  color: var(--grayscale-white);
-}
-
-.hy-hero__title:not(.hy-hero__title--overlay) .hy-hero__title:not(.hy-hero__title--overlay) --black span {
-  color: var(--grayscale-white);
-}
-
-.hy-hero__title:not(.hy-hero__title--overlay) .hy-hero__title:not(.hy-hero__title--overlay) --white span {
-  color: var(--grayscale-black);
-}
-
-.hy-hero__title--overlay {
-  display: block;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.hy-hero__title--overlay span {
-  display: inline;
-  position: relative;
-}
-
-.hy-hero__title--overlay--blue span {
-  background-color: var(--brand-main-light);
-  -webkit-box-shadow: 10px 0 0 var(--brand-main-light), -16px 0 0 var(--brand-main-light);
-  box-shadow: 10px 0 0 var(--brand-main-light), -16px 0 0 var(--brand-main-light);
-  color: var(--brand-main-light);
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__title--overlay--blue span {
-    -webkit-box-shadow: 24px 0 0 var(--brand-main-light), -24px 0 0 var(--brand-main-light);
-    box-shadow: 24px 0 0 var(--brand-main-light), -24px 0 0 var(--brand-main-light);
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__title--overlay--blue span {
-    -webkit-box-shadow: 32px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
-    box-shadow: 32px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__title--overlay--blue span {
-    -webkit-box-shadow: 40px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
-    box-shadow: 40px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
-  }
-}
-
-.hy-hero__title--overlay--black span {
-  background-color: var(--grayscale-black);
-  -webkit-box-shadow: 10px 0 0 var(--grayscale-black), -16px 0 0 var(--grayscale-black);
-  box-shadow: 10px 0 0 var(--grayscale-black), -16px 0 0 var(--grayscale-black);
-  color: var(--grayscale-black);
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__title--overlay--black span {
-    -webkit-box-shadow: 24px 0 0 var(--grayscale-black), -24px 0 0 var(--grayscale-black);
-    box-shadow: 24px 0 0 var(--grayscale-black), -24px 0 0 var(--grayscale-black);
+  .hy-hero--small .hy-hero__content {
+    max-width: 60%;
   }
 }
 
 @media (min-width: 60rem) {
-  .hy-hero__title--overlay--black span {
-    -webkit-box-shadow: 32px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
-    box-shadow: 32px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
+  .hy-hero--large .hy-hero__content {
+    max-width: 50%;
   }
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-hero__title--overlay--black span {
-    -webkit-box-shadow: 40px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
-    box-shadow: 40px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
-  }
-}
-
-.hy-hero__title--overlay--white span {
-  background-color: var(--grayscale-white);
-  -webkit-box-shadow: 10px 0 0 var(--grayscale-white), -16px 0 0 var(--grayscale-white);
-  box-shadow: 10px 0 0 var(--grayscale-white), -16px 0 0 var(--grayscale-white);
-  color: var(--grayscale-white);
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__title--overlay--white span {
-    -webkit-box-shadow: 24px 0 0 var(--grayscale-white), -24px 0 0 var(--grayscale-white);
-    box-shadow: 24px 0 0 var(--grayscale-white), -24px 0 0 var(--grayscale-white);
-  }
+.hy-hero--blue .hy-hero__title h1 {
+  color: var(--grayscale-white) !important;
 }
 
-@media (min-width: 60rem) {
-  .hy-hero__title--overlay--white span {
-    -webkit-box-shadow: 32px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
-    box-shadow: 32px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
-  }
+.hy-hero--black .hy-hero__title h1 {
+  color: var(--grayscale-white) !important;
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-hero__title--overlay--white span {
-    -webkit-box-shadow: 40px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
-    box-shadow: 40px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
-  }
+.hy-hero--white .hy-hero__title h1 {
+  color: var(--grayscale-black) !important;
 }
 
 .hy-hero__description {
-  font-size: 0.9375rem;
-  line-height: 22px;
+  font-size: 1rem;
+  line-height: 24px;
   font-family: var(--main-font-family);
-  margin: 0;
+  margin: 16px 0 0 0;
   padding: 0;
   position: relative;
 }
 
-@media (min-width: 30rem) {
-  .hy-hero__description {
-    font-size: 1rem;
-    line-height: 24px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__description {
-    margin-top: -8px;
-    max-width: 39%;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__description {
-    max-width: 37%;
-  }
-}
-
 @media (min-width: 1601px) {
   .hy-hero__description {
     font-size: 1.0625rem;
@@ -824,112 +381,20 @@
   }
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-hero__description__large, .hy-hero__description--front_page {
-    font-size: 1.0625rem;
-    line-height: 26px;
-  }
-}
-
-.hy-hero__description--white {
-  background-color: var(--grayscale-white);
-  color: var(--grayscale-black);
-}
-
-.hy-hero__description--black {
-  background-color: var(--grayscale-black);
+.hy-hero--black .hy-hero__description {
   color: var(--grayscale-white);
 }
 
-.hy-hero__description--blue {
-  background-color: var(--brand-main-light);
+.hy-hero--blue .hy-hero__description {
   color: var(--grayscale-white);
 }
 
-.hy-hero__description--front_page, .hy-hero__description--landing {
-  padding: 10px 0 22px;
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__description--front_page, .hy-hero__description--landing {
-    padding: 12px 0 24px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__description--front_page, .hy-hero__description--landing {
-    padding: 12px 20px 20px 0;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__description--front_page, .hy-hero__description--landing {
-    max-width: 34%;
-    padding: 12px 20px 20px 0;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__description--front_page, .hy-hero__description--landing {
-    padding: 16px 20px 32px 0;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__description--front_page.hy-hero__description__large, .hy-hero__description--landing.hy-hero__description__large {
-    padding: 16px 20px 32px 0;
-  }
-}
-
-.hy-hero__description--minor_landing {
-  max-width: 100%;
-  padding: 10px 20px 22px 0;
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__description--minor_landing {
-    padding: 12px 20px 24px 0;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__description--minor_landing {
-    padding: 12px 20px 20px 0;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__description--minor_landing {
-    padding: 12px 20px 20px 0;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-hero__description--minor_landing {
-    padding: 16px 20px 24px 0;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__description--minor_landing.hy-hero__description__large {
-    padding: 16px 20px 24px 0;
-  }
+.hy-hero--white .hy-hero__description {
+  color: var(--grayscale-black);
 }
 
 .hy-hero__actions {
-  margin-top: 20px;
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__actions {
-    margin-top: 24px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__actions {
-    margin-top: 0;
-  }
+  margin-top: 24px;
 }
 
 .hy-hero__spacer-box {
@@ -938,27 +403,36 @@
 
 @media (min-width: 60rem) {
   .hy-hero__spacer-box {
-    bottom: 0;
     display: block;
-    left: 0;
     -webkit-box-ordinal-group: 2;
     -ms-flex-order: 1;
     order: 1;
     position: absolute;
-    top: 0;
-    width: 43.75%;
+    inset: 0;
+  }
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--small .hy-hero__spacer-box {
+    width: 60%;
+  }
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--large .hy-hero__spacer-box {
+    width: 50%;
   }
 }
 
-.hy-hero__spacer-box--black {
+.hy-hero--black .hy-hero__spacer-box {
   background-color: var(--grayscale-black);
 }
 
-.hy-hero__spacer-box--blue {
-  background-color: var(--brand-main-light);
+.hy-hero--blue .hy-hero__spacer-box {
+  background-color: var(--brand-main);
 }
 
-.hy-hero__spacer-box--white {
+.hy-hero--white .hy-hero__spacer-box {
   background-color: var(--grayscale-white);
 }
 
@@ -975,6 +449,18 @@
   margin: 0;
 }
 
+@media (min-width: 60rem) {
+  .hy-hero--small .hy-hero__image-container {
+    width: 40%;
+  }
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--large .hy-hero__image-container {
+    width: 50%;
+  }
+}
+
 @media (min-width: 60rem) {
   .hy-hero__image-container {
     background-color: var(--grayscale-white);
@@ -982,45 +468,19 @@
     -webkit-box-ordinal-group: 3;
     -ms-flex-order: 2;
     order: 2;
-    padding: 6px 0;
+    padding: 8px 0;
     position: absolute;
     right: 0;
     top: 0;
-    width: 56.25%;
   }
 }
 
 @media (min-width: 60rem) {
-  .hy-hero__image-container--front_page {
+  .hy-hero--front_page .hy-hero__image-container {
     padding: 0;
   }
 }
 
-.hy-hero__image-container--minor_landing {
-  position: relative;
-  padding: 0 1rem;
-}
-
-@media (min-width: 30rem) {
-  .hy-hero__image-container--minor_landing {
-    padding: 0 2rem;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__image-container--minor_landing {
-    width: 50%;
-    padding: 0;
-    margin-left: 32px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-hero__image-container--minor_landing {
-    margin-left: 42px;
-  }
-}
-
 .hy-image__image {
   display: block;
   height: 100%;
@@ -1028,47 +488,4 @@
   -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
-}
-
-.hy-hero__scroll-button.research_group {
-  display: none;
-}
-
-.hy-hero__scroll-button:not(.research_group) {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-  all: unset;
-  background-color: var(--grayscale-white);
-  bottom: 0;
-  -webkit-clip-path: polygon(25% 25%, 75% 25%, 100% 50%, 100% 60%, 100% 100%, 0 100%, 0% 80%, 0 50%);
-  clip-path: polygon(25% 25%, 75% 25%, 100% 50%, 100% 60%, 100% 100%, 0 100%, 0% 80%, 0 50%);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 44px;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  left: 50%;
-  position: absolute;
-  -webkit-transform: translate(calc(-50% - 5px), 60%);
-  transform: translate(calc(-50% - 5px), 60%);
-  width: 44px;
-}
-
-.hy-hero__scroll-button:not(.research_group) .hy-hero__scroll-icon {
-  position: relative;
-  top: 15px;
-}
-
-.hy-hero__scroll-button:not(.research_group) .hy-hero__scroll-icon svg {
-  -webkit-transform: rotateX(45deg) scaleX(1.4);
-  transform: rotateX(45deg) scaleX(1.4);
-}
-
-@media (min-width: 60rem) {
-  .hy-hero__scroll-button:not(.research_group) {
-    display: none;
-  }
 }