@tacc/core-styles 2.42.0 → 2.43.0

package/src/lib/_imports/trumps/s-hero-banner.css

@@ -1,62 +1,30 @@
 @import url("../tools/media-queries.css");
-@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
+@import url("../tools/x-hero-banner.css");
 
-/* Banner */
-/* Banner: Container */
+.s-hero-banner {
+  @mixin hero-banner;
+}
 @media (--medium-and-above) {
-  .s-home-banner {
-    height: 55.5rem;
-    width: 100vw;
-    max-width: 100%;
-    display: block;
+  .s-hero-banner {
+    @mixin hero-banner--wide-context;
+  }
+  .s-hero-banner article {
+    @mixin hero-banner-article--wide-context;
   }
 }
-
 @media (--medium-and-below) {
-  .s-home-banner {
-    height: auto;
-    display: grid;
+  .s-hero-banner {
+    @mixin hero-banner--slim-context;
   }
 }
 
-.s-home-banner {
-  position: relative; /* for `position: absolute` children */
+.s-hero-banner article {
+  @mixin hero-banner-article;
 }
 
-
-/* Banner: Overlay */
-@media (--medium-and-above) {
-  .s-home-banner article {
-    position: absolute;
-    height: auto;
-    width: 475px;
-    left: 116px;
-    bottom: 50px;
-
-  }
+.s-hero-banner h1 {
+  @mixin hero-banner-title;
 }
-
-.s-home-banner article {
-  color: var(--global-color-primary--xx-dark);
-  background-color: rgb( from design-token('color.gray.light-2x') r g b / 0.9 );
-  z-index: 2;
-  padding: 24px 84px 36px 48px;
-  font-weight: bold;
-
-  & h1 {
-    margin-top: 0;
-    padding-bottom: 14px;
-    margin-bottom: 18px;
-    font-size: 2.4rem; /* design deviates from standard to fit text on 2 lines */
-    border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);
-  }
+.s-hero-banner img {
+  @mixin hero-banner-media;
 }
-
-/* Banner: Image */
-.s-home-banner__media {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  position: absolute;
-  z-index: 1;
-}