@axos-web-dev/shared-components 2.0.0-dev.1 → 2.0.0-dev.10

package/dist/assets/HeroBanner/HeroBanner.css

@@ -1,249 +1,266 @@
-._1ye8k3f1 {
+._1ye8k3f2 {
   position: relative;
   overflow: hidden;
   isolation: isolate;
 }
-._1ye8k3f2 {
+._1ye8k3f3 {
   background: var(--_1073cm81);
   border-bottom: 1px solid #B9C1CE;
   color: var(--_1073cm83);
 }
-._1ye8k3f3 {
+._1ye8k3f4 {
   background: var(--_1073cm88);
   color: var(--_1073cm8a);
 }
-._1ye8k3f4 {
+._1ye8k3f5 {
   background: var(--_1073cm8f);
   color: var(--_1073cm8h);
 }
-._1ye8k3f5 {
+._1ye8k3f6 {
   background: var(--_1073cm8m);
   color: var(--_1073cm8o);
 }
-._1ye8k3f6 {
+._1ye8k3f7 {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-._1ye8k3f9 {
+._1ye8k3fa {
   padding: 2rem 0;
 }
-._1ye8k3fb {
+._1ye8k3fc {
   display: flex;
   justify-content: flex-end;
   max-width: 604px;
 }
-._1ye8k3fc {
+._1ye8k3fd {
   display: contents;
 }
-._1ye8k3fb img {
+._1ye8k3fc img {
   max-height: 480px;
   max-width: 604px;
   object-fit: cover;
 }
-._1ye8k3fd {
+._1ye8k3fe {
   display: block;
   font: 700 14px / 1.5 var(--main-font-family);
   margin-bottom: 4px;
   letter-spacing: .2px;
 }
-._1ye8k3fe {
+._1ye8k3ff {
   color: var(--_1073cm85);
 }
-._1ye8k3ff {
+._1ye8k3fg {
   color: var(--_1073cm8c);
 }
-._1ye8k3fg {
+._1ye8k3fh {
   color: var(--_1073cm8j);
 }
-._1ye8k3fh {
+._1ye8k3fi {
   color: var(--_1073cm8q);
 }
-._1ye8k3fi {
+._1ye8k3fj {
   font: 700 2.5rem / 1.05 var(--header-font-family);
   text-wrap: pretty;
 }
-.lchs2s0 ._1ye8k3fi {
+.lchs2s0 ._1ye8k3fj {
   font-size: 24px !important;
   line-height: 1.16;
 }
-._1ye8k3fj {
+._1ye8k3fk {
   color: var(--_1073cm85);
 }
-._1ye8k3fk {
+._1ye8k3fl {
   color: var(--_1073cm8c);
 }
-._1ye8k3fl {
+._1ye8k3fm {
   color: var(--_1073cm8j);
 }
-._1ye8k3fm {
+._1ye8k3fn {
   color: var(--_1073cm8q);
 }
-._1ye8k3f9 p {
+._1ye8k3fa p {
   font: 400 1rem / 1.5 var(--main-font-family);
   letter-spacing: .2px;
 }
-._1ye8k3fn {
+._1ye8k3fo {
   margin-top: 3.5rem;
   display: flex;
   align-items: center;
   gap: 1.5rem 56px;
 }
-._1ye8k3fn:empty {
+._1ye8k3fo:empty {
   display: none;
 }
-._1ye8k3fo {
+._1ye8k3fp {
   margin-right: 15px;
   margin-top: 24px;
 }
-.page_body_contents > div:has(._1ye8k3f6) {
+.page_body_contents > div:has(._1ye8k3f7) {
   margin-top: 0;
 }
-._1ye8k3fq {
+._1ye8k3fr {
   position: relative;
   text-align: left;
 }
-._1ye8k3fq + ._1ye8k3fq {
+._1ye8k3fr + ._1ye8k3fr {
   margin-top: 8px;
 }
 @media screen and (min-width:1024px) {
-  ._1ye8k3f7 {
+  ._1ye8k3f8 {
     flex-direction: row-reverse;
   }
-  ._1ye8k3f8 {
+  ._1ye8k3f9 {
     left: 0;
     right: unset;
   }
-  ._1ye8k3f9 {
+  ._1ye8k3fa {
     flex: 1 1;
   }
-  ._1ye8k3f0 ._1ye8k3f9 {
+  ._1ye8k3f0 ._1ye8k3fa {
     max-width: 468px;
   }
 }
 @media screen and (max-width:1023px) {
-  ._1ye8k3f6 {
+  ._1ye8k3f7 {
     flex-direction: column;
   }
-  ._1ye8k3f9 {
+  ._1ye8k3fa {
     text-align: center;
   }
 }
-@media (max-width: 1280px) and (min-width: 1024px) {
-  ._1ye8k3f0 ._1ye8k3fa {
-    width: calc(100% - 28px);
-  }
-}
 @media (max-width: 603px) {
-  ._1ye8k3fa {
+  ._1ye8k3fb {
     max-width: 100%;
     width: 100%;
   }
 }
 @media (max-width: 1023px) {
-  ._1ye8k3fb {
+  ._1ye8k3fc {
     justify-content: center;
     width: min(375px,100%);
   }
-  ._1ye8k3fb img {
+  ._1ye8k3fc img {
     max-width: 100%;
   }
 }
 @media (min-width: 1024px) {
-  ._1ye8k3f6 {
+  ._1ye8k3f7 {
     gap: 2rem;
     justify-content: center;
     min-height: 480px;
   }
-  ._1ye8k3f0 ._1ye8k3f6 {
+  ._1ye8k3f0 ._1ye8k3f7 {
     gap: 1.5rem;
     min-height: 740px;
   }
-  ._1ye8k3f1 ._1ye8k3f6 {
+  ._1ye8k3f2 ._1ye8k3f7 {
     padding-left: 2rem;
   }
-  ._1ye8k3f1 ._1ye8k3fa {
+  ._1ye8k3f1 ._1ye8k3f7 {
+    justify-content: space-between;
+  }
+  ._1ye8k3f2 ._1ye8k3fb {
     max-width: 1280px;
     width: 100%;
   }
-  ._1ye8k3fb {
+  ._1ye8k3fc {
     min-height: 480px;
-    _1ye8k3f0 & {
-      max-width: 708px;
-    }
+  }
+  ._1ye8k3f0 ._1ye8k3fc {
+    max-width: 708px;
+  }
+  ._1ye8k3f1 ._1ye8k3fc {
+    align-self: stretch;
+  }
+  ._1ye8k3f1 ._1ye8k3fc img {
+    max-width: none;
+    max-height: none;
   }
 }
 @media screen and (min-width:1281px) {
-  ._1ye8k3f1 ._1ye8k3f6 {
+  ._1ye8k3f2 ._1ye8k3f7 {
     gap: 40px;
     padding-left: 40px;
   }
 }
 @media screen and (max-width:603px) {
-  ._1ye8k3f9 {
+  ._1ye8k3fa {
     margin-inline: auto;
     max-width: calc(100% - 2rem);
   }
 }
+@media screen and (max-width:1023px) and (min-width:451px) {
+  ._1ye8k3f1 ._1ye8k3fc {
+    width: min(400px,100%);
+    aspect-ratio: 1px;
+    border-radius: 1rem 1rem 0 0;
+    overflow: hidden;
+  }
+}
 @media (max-width: 450px) {
-  ._1ye8k3fb {
+  ._1ye8k3fc {
     width: 100%;
   }
 }
 @media screen and (max-width:1180px) and (min-width:1024px) {
-  ._1ye8k3fi {
+  ._1ye8k3fj {
     font-size: 34px;
   }
 }
 @media screen and (max-width:768px) {
-  ._1ye8k3fi {
+  ._1ye8k3fj {
     font-size: 28px;
     line-height: 1.29;
   }
 }
 @media screen and (max-width:1280px) {
-  ._1ye8k3fn {
+  ._1ye8k3fo {
     margin-top: 2.5rem;
   }
-  ._1ye8k3f0 ._1ye8k3fn {
+  ._1ye8k3f0 ._1ye8k3fo {
     flex-direction: column;
   }
-  ._7etqoq1 ._1ye8k3fn {
+  ._7etqoq1 ._1ye8k3fo {
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
   }
 }
 @media (max-width: 1280px) and (min-width: 1024px) {
-  ._1ye8k3f0 ._1ye8k3fn {
+  ._1ye8k3f0 ._1ye8k3fo {
     align-items: flex-start;
   }
 }
 @media screen and (max-width:1023px) {
-  ._1ye8k3fn {
+  ._1ye8k3fo {
     flex-direction: column;
   }
-  ._1ye8k3fo {
+  ._1ye8k3fp {
     margin: 24px auto 0 auto;
   }
 }
 @media screen and (max-width:768px) {
-  ._1ye8k3fn {
+  ._1ye8k3fo {
     margin-top: 1rem;
   }
 }
 @media screen and (min-width:1024px) {
-  ._1ye8k3fn {
+  ._1ye8k3fo {
     flex-wrap: wrap;
   }
+  ._1bsyngo0 ._1ye8k3fo {
+    margin-top: 32px;
+    gap: 16px 32px;
+  }
 }
 @media (max-width:1280px) and (min-width:1024px) {
-  ._1ye8k3fb:not(._1ye8k3f0 ._1ye8k3fb) {
+  ._1ye8k3fc:not(._1ye8k3f0 ._1ye8k3fc) {
     overflow: hidden;
   }
 }
 @media screen and (max-width:432px) {
-  ._1ye8k3fp {
+  ._1ye8k3fq {
     padding-left: 20px;
   }
 }

package/dist/assets/HeroBanner/LargeBanner.css

@@ -1,146 +1,191 @@
-._1bsyngo0 {
+._1bsyngo1 {
   position: relative;
   overflow: hidden;
   isolation: isolate;
 }
-._1bsyngo1 {
+._1bsyngo2 {
   background: var(--_1073cm81);
 }
-._1bsyngo2 {
+._1bsyngo3 {
   background: var(--_1073cm88);
 }
-._1bsyngo3 {
+._1bsyngo4 {
   background: var(--_1073cm8f);
 }
-._1bsyngo4 {
+._1bsyngo5 {
   background: var(--_1073cm8m);
 }
-._1bsyngo5 {
+._1bsyngo7 {
   isolation: isolate;
   overflow: hidden;
   position: relative;
 }
-._1bsyngo6 {
+._1bsyngoa {
   padding: 2rem 0;
   position: relative;
   z-index: 1;
 }
-._1bsyngo7 {
+._1bsyngob {
   background: var(--_1073cm8f);
   color: var(--_1073cm8h);
 }
-._1bsyngo8 {
+._1bsyngo0 ._1bsyngob {
+  background: var(--_1073cm81);
+  color: var(--_1073cm83);
+}
+._1bsyngoc {
   background: var(--_1073cm8f);
   color: var(--_1073cm8h);
 }
-._1bsyngo9 {
+._1bsyngo0 ._1bsyngoc {
+  background: var(--_1073cm88);
+  color: var(--_1073cm8a);
+}
+._1bsyngod {
   background: var(--_1073cm81);
   color: var(--_1073cm83);
 }
-._1bsyngoa {
+._1bsyngo0 ._1bsyngod {
+  background: var(--_1073cm8f);
+  color: var(--_1073cm8h);
+}
+._1bsyngoe {
   background: var(--_1073cm81);
   color: var(--_1073cm83);
 }
-._1bsyngob {
+._1bsyngo0 ._1bsyngoe {
+  background: var(--_1073cm8m);
+  color: var(--_1073cm8o);
+}
+._1bsyngof {
   display: block;
   font: 700 14px / 1.5 var(--main-font-family);
   margin-bottom: 2px;
   letter-spacing: .2px;
 }
-._1bsyngoc {
+._1bsyngog {
   color: var(--_1073cm8h);
 }
-._1bsyngod {
+._1bsyngo0 ._1bsyngog {
+  color: var(--_1073cm85);
+}
+._1bsyngoh {
   color: var(--_1073cm8h);
 }
-._1bsyngoe {
+._1bsyngo0 ._1bsyngoh {
+  color: var(--_1073cm8c);
+}
+._1bsyngoi {
   color: var(--_1073cm85);
 }
-._1bsyngof {
+._1bsyngo0 ._1bsyngoi {
+  color: var(--_1073cm8j);
+}
+._1bsyngoj {
   color: var(--_1073cm85);
 }
-._1bsyngog {
+._1bsyngo0 ._1bsyngoj {
+  color: var(--_1073cm8q);
+}
+._1bsyngok {
   font: 700 2.5rem / 1.25 var(--header-font-family);
 }
-._1bsyngoh {
+._1bsyngol {
   color: var(--_1073cm8j);
 }
-._1bsyngoi {
+._1bsyngo0 ._1bsyngol {
+  color: var(--_1073cm85);
+}
+._1bsyngom {
   color: var(--_1073cm8j);
 }
-._1bsyngoj {
+._1bsyngo0 ._1bsyngom {
+  color: var(--_1073cm8c);
+}
+._1bsyngon {
   color: var(--_1073cm85);
 }
-._1bsyngok {
+._1bsyngo0 ._1bsyngon {
+  color: var(--_1073cm8j);
+}
+._1bsyngoo {
   color: var(--_1073cm85);
 }
-._1bsyngo6 p {
-  font: 400 16px / 1.5 var(--main-font-family);
-  letter-spacing: .2px;
+._1bsyngo0 ._1bsyngoo {
+  color: var(--_1073cm8q);
 }
-._1bsyngol {
+._1bsyngop {
   isolation: isolate;
   overflow: hidden;
   position: relative;
 }
-._1bsyngol picture {
-  display: contents;
-}
-._1bsyngom {
+._1bsyngoq {
   width: 100%;
   height: 100%;
   object-position: right bottom;
   object-fit: cover;
 }
+._1bsyngor {
+  position: absolute;
+  height: 100%;
+  inset: 0;
+  width: 100%;
+  z-index: -1;
+}
+._1bsyngos {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
 @media (max-width:1023px) {
-  ._1bsyngo0 > .containment {
+  ._1bsyngo6 {
     width: 100%;
     max-width: 100%;
     border-radius: 0 !important;
   }
-  ._1bsyngo5 > .containment {
-    padding: 24px;
-  }
-  ._1bsyngo5 > * {
+  ._1bsyngo9 {
     width: 100%;
     border-radius: 0 !important;
   }
 }
 @media (max-width: 1023px) {
-  ._1bsyngo5 {
+  ._1bsyngo7 {
     flex-direction: column;
   }
-  ._1bsyngo6 {
+  ._1bsyngoa {
     text-align: center;
     border-radius: 0;
   }
-  ._1bsyngol {
+  ._1bsyngop {
     justify-content: flex-start;
-    width: 100%;
-    max-width: min(330px,100%);
-    margin-right: auto;
-    margin-left: auto;
+    width: min(330px,calc(100% - 2rem));
+    margin-inline: auto;
+    margin: 1rem;
   }
-  ._1bsyngom {
-    justify-content: flex-start;
-    width: 100%;
-    max-width: min(330px,100%);
-    margin-right: auto;
-    margin-left: auto;
-    padding: 1em 0;
-    border-radius: 1em;
+  ._1bsyngoq {
+    border-radius: 1rem;
+  }
+  ._1bsyngor {
+    display: none;
   }
 }
 @media (min-width: 1024px) {
-  ._1bsyngo5 {
+  ._1bsyngo7 {
     min-height: calc(42.5rem + ((1vw - 10.24px) * 23.3463));
   }
-  ._1bsyngo6 {
+  ._1bsyngo0 ._1bsyngo7 {
+    min-height: 1px;
+    aspect-ratio: 16 / 9;
+  }
+  ._1bsyngoa {
     width: 59%;
     max-width: 690px;
     padding: 56px;
   }
-  ._1bsyngol {
+  ._1bsyngo0 ._1bsyngoa {
+    padding: 32px;
+  }
+  ._1bsyngop {
     position: absolute;
     right: 0;
     height: 81%;
@@ -148,24 +193,46 @@
     top: 50%;
     transform: translateY(-50%);
   }
+  ._1bsyngot {
+    position: absolute;
+  }
+  ._1bsyngou {
+    border-radius: 0 0 1rem 0;
+    left: 0;
+    top: 0;
+  }
+  ._1bsyngov {
+    border-radius: 0 0 0 1rem;
+    right: 0;
+    top: 0;
+  }
+  ._1bsyngow {
+    border-radius: 0 1rem 0 0;
+    bottom: 0;
+    left: 0;
+  }
+  ._1bsyngox {
+    border-radius: 1rem 0 0 0;
+    bottom: 0;
+    right: 0;
+  }
 }
 @media (min-width: 1281px) {
-  ._1bsyngo5 {
+  ._1bsyngo7 {
     min-height: 740px;
   }
+  ._1bsyngo0 ._1bsyngo7 {
+    min-height: 1px;
+  }
 }
 @media (min-width:1024px) {
-  ._1bsyngo5 .containment {
+  ._1bsyngo8 {
     display: contents;
   }
 }
 @media screen and (max-width:768px) {
-  ._1bsyngog {
+  ._1bsyngok {
     font-size: 28px;
     line-height: 1.29;
   }
-  ._1bsyngo6 p {
-    font-size: 1rem;
-    line-height: 1.5;
-  }
 }