@kickstartds/ds-agency-premium 1.6.60 → 1.6.61--canary.40.1503.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-1cfcf6e8.d.ts} +2 -2
  2. package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-d9decb7c.d.ts} +2 -2
  3. package/dist/{CtaProps-93230a76.d.ts → CtaProps-fd5e75dc.d.ts} +13 -8
  4. package/dist/{PageProps-aa29c554.d.ts → PageProps-1cfcf6e8.d.ts} +1 -1
  5. package/dist/{SectionProps-1cfcf6e8.d.ts → SectionProps-03ff6d21.d.ts} +3 -3
  6. package/dist/{SliderProps-93230a76.d.ts → SliderProps-fd5e75dc.d.ts} +1 -1
  7. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +57 -24
  8. package/dist/components/blog-overview/index.d.ts +1 -1
  9. package/dist/components/blog-post/blog-post.schema.dereffed.json +57 -24
  10. package/dist/components/blog-post/index.d.ts +1 -1
  11. package/dist/components/cta/cta.css +35 -61
  12. package/dist/components/cta/cta.schema.dereffed.json +19 -8
  13. package/dist/components/cta/cta.schema.json +15 -8
  14. package/dist/components/cta/index.d.ts +1 -1
  15. package/dist/components/cta/index.js +4 -6
  16. package/dist/components/footer/footer.css +1 -1
  17. package/dist/components/header/header.css +1 -1
  18. package/dist/components/hero/hero.css +3 -2
  19. package/dist/components/image-story/image-story.css +5 -2
  20. package/dist/components/image-story/index.d.ts +1 -1
  21. package/dist/components/index/index.d.ts +3 -3
  22. package/dist/components/mosaic/mosaic.css +1 -1
  23. package/dist/components/page/index.d.ts +1 -1
  24. package/dist/components/page/page.schema.dereffed.json +38 -16
  25. package/dist/components/page-wrapper/tokens.css +1 -1
  26. package/dist/components/presets.json +56 -49
  27. package/dist/components/section/index.d.ts +1 -1
  28. package/dist/components/section/section.css +2 -2
  29. package/dist/components/section/section.schema.dereffed.json +38 -16
  30. package/dist/components/slider/index.d.ts +1 -1
  31. package/dist/components/slider/slider.schema.dereffed.json +19 -8
  32. package/dist/components/split/split.css +2 -2
  33. package/dist/components/testimonials/index.d.ts +1 -1
  34. package/dist/global.css +3 -2
  35. package/dist/tokens/themes.css +4 -4
  36. package/dist/tokens/tokens.css +1 -1
  37. package/dist/tokens/tokens.js +1 -1
  38. package/package.json +1 -1
  39. /package/dist/{ImageStoryProps-e853e1e7.d.ts → ImageStoryProps-03ff6d21.d.ts} +0 -0
@@ -3,9 +3,9 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-1cfcf6e8.js";
6
+ import { SectionProps } from "./SectionProps-03ff6d21.js";
7
7
  import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
8
- import { CtaProps } from "./CtaProps-93230a76.js";
8
+ import { CtaProps } from "./CtaProps-fd5e75dc.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
10
10
  /**
11
11
  * Collection of sections (with their contents) to render as the blog overview intro
@@ -5,8 +5,8 @@
5
5
  */
6
6
  import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
8
- import { SectionProps } from "./SectionProps-1cfcf6e8.js";
9
- import { CtaProps } from "./CtaProps-93230a76.js";
8
+ import { SectionProps } from "./SectionProps-03ff6d21.js";
9
+ import { CtaProps } from "./CtaProps-fd5e75dc.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
12
12
  * Body text for the blog post, overwrites sections if present
@@ -23,10 +23,6 @@ type HighlightText = boolean;
23
23
  * Make the text and buttons color neutral
24
24
  */
25
25
  type ColorNeutral = boolean;
26
- /**
27
- * Set the width of the content to the full width of the element
28
- */
29
- type Width = boolean;
30
26
  /**
31
27
  * Text content to display inside the button
32
28
  */
@@ -59,6 +55,10 @@ type Padding = boolean;
59
55
  * Image description
60
56
  */
61
57
  type AltText = string;
58
+ /**
59
+ * Select a vertical alignment for the image
60
+ */
61
+ type VerticalAlignmentOfTheImage = "center" | "top" | "bottom";
62
62
  /**
63
63
  * Switch to displaying the image after the text on mobile
64
64
  */
@@ -72,23 +72,27 @@ type DesktopImageAfterText = boolean;
72
72
  */
73
73
  type TextAlignment = "left" | "center";
74
74
  /**
75
- * Select a vertical alignment for the image
75
+ * Select a vertical alignment for the content
76
76
  */
77
77
  type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
78
+ /**
79
+ * Toggle padding of the content
80
+ */
81
+ type Padding1 = boolean;
78
82
  interface CtaProps {
79
83
  headline?: ComponentHeadline;
80
84
  sub?: ComponentSubheadline;
81
85
  text?: ComponentText;
82
86
  highlightText?: HighlightText;
83
87
  colorNeutral?: ColorNeutral;
84
- fullWidth?: Width;
85
88
  buttons?: Button[];
86
89
  backgroundColor?: BackgroundColor;
87
90
  backgroundImage?: BackgroundImage;
88
91
  image?: Image;
89
92
  order?: Order;
90
93
  textAlign?: TextAlignment;
91
- contentAlign?: VerticalAlignmentOfTheContent;
94
+ align?: VerticalAlignmentOfTheContent;
95
+ padding?: Padding1;
92
96
  }
93
97
  interface Button {
94
98
  label?: Label;
@@ -102,6 +106,7 @@ interface Image {
102
106
  src?: ImageSource;
103
107
  padding?: Padding;
104
108
  alt?: AltText;
109
+ align?: VerticalAlignmentOfTheImage;
105
110
  }
106
111
  /**
107
112
  * Choose what comes first on mobile and desktop: image or text
@@ -110,4 +115,4 @@ interface Order {
110
115
  mobileImageLast?: MobileImageAfterText;
111
116
  desktopImageLast?: DesktopImageAfterText;
112
117
  }
113
- export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Width, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, CtaProps, Button, Image, Order };
118
+ export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1, CtaProps, Button, Image, Order };
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-1cfcf6e8.js";
6
+ import { SectionProps } from "./SectionProps-03ff6d21.js";
7
7
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
8
8
  /**
9
9
  * Collection of sections (with their contents) to render on the page
@@ -3,18 +3,18 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { CtaProps } from "./CtaProps-93230a76.js";
6
+ import { CtaProps } from "./CtaProps-fd5e75dc.js";
7
7
  import { DividerProps } from "./DividerProps-2ef31901.js";
8
8
  import { FaqProps } from "./FaqProps-ad618cd5.js";
9
9
  import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
10
10
  import { GalleryProps } from "./GalleryProps-76e7de44.js";
11
11
  import { HeroProps } from "./HeroProps-f704d270.js";
12
12
  import { HtmlProps } from "./HtmlProps-8e95ed81.js";
13
- import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
13
+ import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
14
14
  import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
15
15
  import { LogosProps } from "./LogosProps-f9474fe2.js";
16
16
  import { MosaicProps } from "./MosaicProps-d52c7151.js";
17
- import { SliderProps } from "./SliderProps-93230a76.js";
17
+ import { SliderProps } from "./SliderProps-fd5e75dc.js";
18
18
  import { StatsProps } from "./StatsProps-bf5ef578.js";
19
19
  import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
20
20
  import { TestimonialsProps } from "./TestimonialsProps-f7211553.js";
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { CtaProps } from "./CtaProps-93230a76.js";
6
+ import { CtaProps } from "./CtaProps-fd5e75dc.js";
7
7
  import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
8
8
  import { GalleryProps } from "./GalleryProps-76e7de44.js";
9
9
  import { HeroProps } from "./HeroProps-f704d270.js";
@@ -282,12 +282,6 @@
282
282
  "default": false,
283
283
  "type": "boolean"
284
284
  },
285
- "fullWidth": {
286
- "title": "Width",
287
- "description": "Set the width of the content to the full width of the element",
288
- "type": "boolean",
289
- "default": false
290
- },
291
285
  "buttons": {
292
286
  "type": "array",
293
287
  "items": {
@@ -351,6 +345,17 @@
351
345
  "title": "Alt text",
352
346
  "description": "Image description",
353
347
  "type": "string"
348
+ },
349
+ "align": {
350
+ "title": "Vertical alignment of the image",
351
+ "description": "Select a vertical alignment for the image",
352
+ "type": "string",
353
+ "enum": [
354
+ "center",
355
+ "top",
356
+ "bottom"
357
+ ],
358
+ "default": "center"
354
359
  }
355
360
  },
356
361
  "additionalProperties": false
@@ -385,9 +390,9 @@
385
390
  "type": "string",
386
391
  "default": "left"
387
392
  },
388
- "contentAlign": {
393
+ "align": {
389
394
  "title": "Vertical alignment of the content",
390
- "description": "Select a vertical alignment for the image",
395
+ "description": "Select a vertical alignment for the content",
391
396
  "type": "string",
392
397
  "enum": [
393
398
  "center",
@@ -396,6 +401,12 @@
396
401
  ],
397
402
  "default": "center"
398
403
  },
404
+ "padding": {
405
+ "title": "Padding",
406
+ "description": "Toggle padding of the content",
407
+ "type": "boolean",
408
+ "default": false
409
+ },
399
410
  "type": {
400
411
  "const": "cta"
401
412
  }
@@ -1538,12 +1549,6 @@
1538
1549
  "default": false,
1539
1550
  "type": "boolean"
1540
1551
  },
1541
- "fullWidth": {
1542
- "title": "Width",
1543
- "description": "Set the width of the content to the full width of the element",
1544
- "type": "boolean",
1545
- "default": false
1546
- },
1547
1552
  "buttons": {
1548
1553
  "type": "array",
1549
1554
  "items": {
@@ -1607,6 +1612,17 @@
1607
1612
  "title": "Alt text",
1608
1613
  "description": "Image description",
1609
1614
  "type": "string"
1615
+ },
1616
+ "align": {
1617
+ "title": "Vertical alignment of the image",
1618
+ "description": "Select a vertical alignment for the image",
1619
+ "type": "string",
1620
+ "enum": [
1621
+ "center",
1622
+ "top",
1623
+ "bottom"
1624
+ ],
1625
+ "default": "center"
1610
1626
  }
1611
1627
  },
1612
1628
  "additionalProperties": false
@@ -1641,9 +1657,9 @@
1641
1657
  "type": "string",
1642
1658
  "default": "left"
1643
1659
  },
1644
- "contentAlign": {
1660
+ "align": {
1645
1661
  "title": "Vertical alignment of the content",
1646
- "description": "Select a vertical alignment for the image",
1662
+ "description": "Select a vertical alignment for the content",
1647
1663
  "type": "string",
1648
1664
  "enum": [
1649
1665
  "center",
@@ -1652,6 +1668,12 @@
1652
1668
  ],
1653
1669
  "default": "center"
1654
1670
  },
1671
+ "padding": {
1672
+ "title": "Padding",
1673
+ "description": "Toggle padding of the content",
1674
+ "type": "boolean",
1675
+ "default": false
1676
+ },
1655
1677
  "type": {
1656
1678
  "const": "cta"
1657
1679
  }
@@ -3693,12 +3715,6 @@
3693
3715
  "default": false,
3694
3716
  "type": "boolean"
3695
3717
  },
3696
- "fullWidth": {
3697
- "title": "Width",
3698
- "description": "Set the width of the content to the full width of the element",
3699
- "type": "boolean",
3700
- "default": false
3701
- },
3702
3718
  "buttons": {
3703
3719
  "type": "array",
3704
3720
  "items": {
@@ -3762,6 +3778,17 @@
3762
3778
  "title": "Alt text",
3763
3779
  "description": "Image description",
3764
3780
  "type": "string"
3781
+ },
3782
+ "align": {
3783
+ "title": "Vertical alignment of the image",
3784
+ "description": "Select a vertical alignment for the image",
3785
+ "type": "string",
3786
+ "enum": [
3787
+ "center",
3788
+ "top",
3789
+ "bottom"
3790
+ ],
3791
+ "default": "center"
3765
3792
  }
3766
3793
  },
3767
3794
  "additionalProperties": false
@@ -3796,9 +3823,9 @@
3796
3823
  "type": "string",
3797
3824
  "default": "left"
3798
3825
  },
3799
- "contentAlign": {
3826
+ "align": {
3800
3827
  "title": "Vertical alignment of the content",
3801
- "description": "Select a vertical alignment for the image",
3828
+ "description": "Select a vertical alignment for the content",
3802
3829
  "type": "string",
3803
3830
  "enum": [
3804
3831
  "center",
@@ -3807,6 +3834,12 @@
3807
3834
  ],
3808
3835
  "default": "center"
3809
3836
  },
3837
+ "padding": {
3838
+ "title": "Padding",
3839
+ "description": "Toggle padding of the content",
3840
+ "type": "boolean",
3841
+ "default": false
3842
+ },
3810
3843
  "type": {
3811
3844
  "const": "cta"
3812
3845
  }
@@ -1,4 +1,4 @@
1
- import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
1
+ import { BlogOverviewProps } from "../../BlogOverviewProps-1cfcf6e8.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
4
4
  export type { BlogOverviewProps };
@@ -558,12 +558,6 @@
558
558
  "default": false,
559
559
  "type": "boolean"
560
560
  },
561
- "fullWidth": {
562
- "title": "Width",
563
- "description": "Set the width of the content to the full width of the element",
564
- "type": "boolean",
565
- "default": false
566
- },
567
561
  "buttons": {
568
562
  "type": "array",
569
563
  "items": {
@@ -627,6 +621,17 @@
627
621
  "title": "Alt text",
628
622
  "description": "Image description",
629
623
  "type": "string"
624
+ },
625
+ "align": {
626
+ "title": "Vertical alignment of the image",
627
+ "description": "Select a vertical alignment for the image",
628
+ "type": "string",
629
+ "enum": [
630
+ "center",
631
+ "top",
632
+ "bottom"
633
+ ],
634
+ "default": "center"
630
635
  }
631
636
  },
632
637
  "additionalProperties": false
@@ -661,9 +666,9 @@
661
666
  "type": "string",
662
667
  "default": "left"
663
668
  },
664
- "contentAlign": {
669
+ "align": {
665
670
  "title": "Vertical alignment of the content",
666
- "description": "Select a vertical alignment for the image",
671
+ "description": "Select a vertical alignment for the content",
667
672
  "type": "string",
668
673
  "enum": [
669
674
  "center",
@@ -672,6 +677,12 @@
672
677
  ],
673
678
  "default": "center"
674
679
  },
680
+ "padding": {
681
+ "title": "Padding",
682
+ "description": "Toggle padding of the content",
683
+ "type": "boolean",
684
+ "default": false
685
+ },
675
686
  "type": {
676
687
  "const": "cta"
677
688
  }
@@ -1814,12 +1825,6 @@
1814
1825
  "default": false,
1815
1826
  "type": "boolean"
1816
1827
  },
1817
- "fullWidth": {
1818
- "title": "Width",
1819
- "description": "Set the width of the content to the full width of the element",
1820
- "type": "boolean",
1821
- "default": false
1822
- },
1823
1828
  "buttons": {
1824
1829
  "type": "array",
1825
1830
  "items": {
@@ -1883,6 +1888,17 @@
1883
1888
  "title": "Alt text",
1884
1889
  "description": "Image description",
1885
1890
  "type": "string"
1891
+ },
1892
+ "align": {
1893
+ "title": "Vertical alignment of the image",
1894
+ "description": "Select a vertical alignment for the image",
1895
+ "type": "string",
1896
+ "enum": [
1897
+ "center",
1898
+ "top",
1899
+ "bottom"
1900
+ ],
1901
+ "default": "center"
1886
1902
  }
1887
1903
  },
1888
1904
  "additionalProperties": false
@@ -1917,9 +1933,9 @@
1917
1933
  "type": "string",
1918
1934
  "default": "left"
1919
1935
  },
1920
- "contentAlign": {
1936
+ "align": {
1921
1937
  "title": "Vertical alignment of the content",
1922
- "description": "Select a vertical alignment for the image",
1938
+ "description": "Select a vertical alignment for the content",
1923
1939
  "type": "string",
1924
1940
  "enum": [
1925
1941
  "center",
@@ -1928,6 +1944,12 @@
1928
1944
  ],
1929
1945
  "default": "center"
1930
1946
  },
1947
+ "padding": {
1948
+ "title": "Padding",
1949
+ "description": "Toggle padding of the content",
1950
+ "type": "boolean",
1951
+ "default": false
1952
+ },
1931
1953
  "type": {
1932
1954
  "const": "cta"
1933
1955
  }
@@ -3452,12 +3474,6 @@
3452
3474
  "default": false,
3453
3475
  "type": "boolean"
3454
3476
  },
3455
- "fullWidth": {
3456
- "title": "Width",
3457
- "description": "Set the width of the content to the full width of the element",
3458
- "type": "boolean",
3459
- "default": false
3460
- },
3461
3477
  "buttons": {
3462
3478
  "type": "array",
3463
3479
  "items": {
@@ -3521,6 +3537,17 @@
3521
3537
  "title": "Alt text",
3522
3538
  "description": "Image description",
3523
3539
  "type": "string"
3540
+ },
3541
+ "align": {
3542
+ "title": "Vertical alignment of the image",
3543
+ "description": "Select a vertical alignment for the image",
3544
+ "type": "string",
3545
+ "enum": [
3546
+ "center",
3547
+ "top",
3548
+ "bottom"
3549
+ ],
3550
+ "default": "center"
3524
3551
  }
3525
3552
  },
3526
3553
  "additionalProperties": false
@@ -3555,9 +3582,9 @@
3555
3582
  "type": "string",
3556
3583
  "default": "left"
3557
3584
  },
3558
- "contentAlign": {
3585
+ "align": {
3559
3586
  "title": "Vertical alignment of the content",
3560
- "description": "Select a vertical alignment for the image",
3587
+ "description": "Select a vertical alignment for the content",
3561
3588
  "type": "string",
3562
3589
  "enum": [
3563
3590
  "center",
@@ -3566,6 +3593,12 @@
3566
3593
  ],
3567
3594
  "default": "center"
3568
3595
  },
3596
+ "padding": {
3597
+ "title": "Padding",
3598
+ "description": "Toggle padding of the content",
3599
+ "type": "boolean",
3600
+ "default": false
3601
+ },
3569
3602
  "type": {
3570
3603
  "const": "cta"
3571
3604
  }
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export type { BlogPostProps };
@@ -1,12 +1,15 @@
1
1
  .dsa-cta {
2
- --dsa-cta--vertical-padding: var(--l-section--space-default);
3
- --dsa-cta--horizontal-padding: var(--dsa-content--spacing);
2
+ --dsa-cta--gap: var(--ks-spacing-stack-m) var(--ks-spacing-inline-m);
3
+ --dsa-cta__content--vertical-padding: var(--dsa-content--vertical-spacing);
4
+ --dsa-cta__content--horizontal-padding: var(--dsa-content--horizontal-spacing);
5
+ --dsa-cta__content--max-width: var(--dsa-content--width_narrow);
4
6
  --dsa-cta__copy--font: var(--dsa-rich-text--font);
5
7
  --dsa-cta__copy--color: var(--ks-text-color-default);
6
8
  --dsa-cta__headline--color: var(--dsa-headline--color);
7
9
  --dsa-cta__headline--font: var(--dsa-headline_h2--font);
8
10
  --dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
9
11
  --dsa-cta__subheadline--font: var(--dsa-headline_h2__subheadline--font);
12
+ --dsa-cta__image--padding: var(--ks-spacing-inset-m);
10
13
  --dsa-cta_color-neutral__headline--color: var(--ks-text-color-default);
11
14
  --dsa-cta_color-neutral__subheadline--color: var(--ks-text-color-default);
12
15
  --dsa-cta_color-neutral__copy--color: var(--ks-text-color-default);
@@ -16,11 +19,11 @@
16
19
  }
17
20
 
18
21
  .dsa-cta.c-storytelling {
19
- --c-storytelling--padding-ratio: 2;
20
- --c-storytelling--horizontal-padding: var(--dsa-content--spacing);
22
+ --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);
23
+ --c-storytelling--vertical-padding: var(--dsa-cta__content--vertical-padding);
21
24
  justify-content: center;
22
25
  align-items: stretch;
23
- padding: 0;
26
+ gap: var(--dsa-cta--gap, var(--ks-spacing-inline-m));
24
27
  }
25
28
  .dsa-cta.c-storytelling.dsa-cta--color-neutral {
26
29
  --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
@@ -35,34 +38,16 @@
35
38
  var(--dsa-headline_h1__subheadline--font)
36
39
  );
37
40
  }
38
- .dsa-cta.c-storytelling.c-storytelling--full {
39
- --c-storytelling--padding-ratio: 1;
40
- }
41
- .dsa-cta.c-storytelling.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
42
- padding-left: var(--dsa-cta--horizontal-padding);
43
- }
44
- .dsa-cta.c-storytelling.dsa-cta--align-top {
45
- align-items: flex-start;
46
- }
47
- .dsa-cta.c-storytelling.dsa-cta--align-bottom {
48
- align-items: flex-end;
49
- }
50
- .dsa-cta.c-storytelling .c-storytelling__box {
51
- width: 100%;
52
- padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
53
- }
54
- @container storytelling (max-width: 640px) {
55
- .dsa-cta.c-storytelling .c-storytelling__box {
56
- padding-top: calc(var(--dsa-cta--vertical-padding, var(--l-section--space-default)) / var(--c-storytelling--padding-ratio));
57
- }
58
- .dsa-cta.c-storytelling .c-storytelling__box:only-child {
59
- padding-top: var(--dsa-cta--vertical-padding, var(--l-section--space-default));
60
- }
41
+ .dsa-cta.c-storytelling.dsa-cta--no-padding .c-storytelling__box {
42
+ padding: 0;
61
43
  }
62
- .dsa-cta.c-storytelling .c-storytelling__box:only-child {
63
- padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
44
+ .dsa-cta.c-storytelling.dsa-cta--image-padding .c-storytelling__image {
45
+ padding: var(--dsa-cta__content--vertical-padding, var(--dsa-content--vertical-spacing)) var(--dsa-cta__content--horizontal-padding, var(--dsa-content--horizontal-spacing));
64
46
  }
65
47
  .dsa-cta.c-storytelling .c-storytelling__box__content {
48
+ max-width: var(--dsa-cta__content--max-width, var(--dsa-content--width_narrow));
49
+ }
50
+ .dsa-cta.c-storytelling .c-storytelling__box:only-child .c-storytelling__box__content {
66
51
  max-width: 100%;
67
52
  }
68
53
  .dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
@@ -79,50 +64,39 @@
79
64
  font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
80
65
  color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
81
66
  }
82
- .dsa-cta.c-storytelling .c-storytelling__box:only-child {
83
- --dsa-cta--horizontal-padding: var(--dsa-content--spacing);
84
- }
85
- .dsa-cta.c-storytelling .c-storytelling__image {
86
- margin: 0;
87
- }
88
- @container storytelling (min-width: 640px) {
89
- .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
90
- padding-left: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
91
- }
92
- .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box {
93
- padding-right: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
67
+ @container storytelling (max-width: 639.9px) {
68
+ .dsa-cta.c-storytelling.c-storytelling--order-mobile-image-last .c-storytelling__box {
69
+ padding-bottom: 0;
94
70
  }
95
- .dsa-cta.c-storytelling .c-storytelling__box {
96
- padding-left: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
71
+ .dsa-cta.c-storytelling.c-storytelling--order-mobile-image-last .c-storytelling__image {
72
+ padding-top: 0;
97
73
  }
98
- .dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
99
- justify-content: center;
74
+ .dsa-cta.c-storytelling:not(.c-storytelling--order-mobil-image-last) .c-storytelling__box {
75
+ padding-top: 0;
100
76
  }
101
- .dsa-cta.c-storytelling .c-storytelling__box:only-child {
102
- width: 100%;
103
- max-width: calc(var(--dsa-content--width_default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
77
+ .dsa-cta.c-storytelling:not(.c-storytelling--order-mobil-image-last) .c-storytelling__image {
78
+ padding-bottom: 0;
104
79
  }
105
- .dsa-cta.c-storytelling > .c-storytelling__image {
106
- padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
107
- padding-right: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
80
+ }
81
+ @container storytelling (min-width: 640px) {
82
+ .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box {
83
+ padding-right: 0;
108
84
  }
109
- .dsa-cta.c-storytelling.c-storytelling--full > .c-storytelling__image {
110
- padding: 0;
85
+ .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
86
+ padding-left: 0;
111
87
  }
112
- .dsa-cta.c-storytelling > .c-storytelling__image,
113
- .dsa-cta.c-storytelling > .c-storytelling__box {
114
- max-width: calc(var(--dsa-content--width_wide) / 2);
88
+ .dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__box {
89
+ padding-left: 0;
115
90
  }
116
- .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
117
- .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {
118
- max-width: 100%;
91
+ .dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__image {
92
+ padding-right: 0;
119
93
  }
120
94
  }
121
95
 
122
96
  @media (min-width: 640px) {
123
97
  .dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
124
98
  .dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
125
- padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)));
99
+ padding-top: calc(var(--dsa-header--height) + var(--dsa-cta__content--horizontal-padding, var(--dsa-content--horizontal-spacing)));
126
100
  z-index: 1;
127
101
  }
128
102
  }