@carbon/ibmdotcom-styles 2.14.0-rc.2 → 2.15.0-rc.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.
@@ -9897,7 +9897,7 @@ screen and (prefers-contrast) {
9897
9897
  :host(c4d-region-item) .cds--link .cds--card__copy,
9898
9898
  :host(c4d-region-item) .cds--link .cds--card__heading {
9899
9899
  color: var(--cds-text-primary,#161616);
9900
- max-inline-size: to-rem(640px);
9900
+ max-inline-size: 40rem;
9901
9901
  -webkit-padding-end: 10%;
9902
9902
  padding-inline-end: 10%
9903
9903
  }
@@ -9942,6 +9942,18 @@ screen and (prefers-contrast) {
9942
9942
  content: "";
9943
9943
  inset: 0
9944
9944
  }
9945
+ .cds--card .cds--card__footer-wrapper,
9946
+ :host(c4d-card) .cds--card__footer-wrapper,
9947
+ :host(c4d-card-cta) .cds--card__footer-wrapper,
9948
+ :host(c4d-card-group-item) .cds--card .cds--card__footer-wrapper,
9949
+ :host(c4d-card-group-item) .cds--card__footer-wrapper,
9950
+ :host(c4d-card-in-card) .cds--card__footer-wrapper,
9951
+ :host(c4d-content-group-cards-item) .cds--card .cds--card__footer-wrapper,
9952
+ :host(c4d-content-group-cards-item) .cds--card__footer-wrapper,
9953
+ :host(c4d-region-item) .cds--link .cds--card__footer-wrapper {
9954
+ -webkit-margin-before: auto;
9955
+ margin-block-start: auto
9956
+ }
9945
9957
  :host(c4d-card),
9946
9958
  :host(c4d-card-cta),
9947
9959
  :host(c4d-card-group-item),
@@ -10402,8 +10414,6 @@ screen and (prefers-contrast) {
10402
10414
  :host(c4d-card-in-card-footer) a,
10403
10415
  :host(c4d-feature-card-footer) a,
10404
10416
  :host(c4d-feature-cta-footer) a {
10405
- -webkit-margin-before: auto;
10406
- margin-block-start: auto;
10407
10417
  text-decoration: none
10408
10418
  }
10409
10419
  .cds--card .cds--card__footer:focus,
@@ -13436,6 +13446,17 @@ screen and (prefers-contrast) {
13436
13446
  font-size: calc(2rem + 0 * (100vw - 82rem)/ 17)
13437
13447
  }
13438
13448
  }
13449
+ @media (min-width:99rem) {
13450
+ .cds--content-group__title,
13451
+ :host(c4d-content-group-heading) {
13452
+ font-weight: 400;
13453
+ font-size: 2rem
13454
+ }
13455
+ }
13456
+ .cds--content-group__title ::slotted(h3),
13457
+ :host(c4d-content-group-heading) ::slotted(h3) {
13458
+ font-size: inherit!important
13459
+ }
13439
13460
  .cds--content-group__copy,
13440
13461
  .cds--content-group__title,
13441
13462
  :host(c4d-content-group-copy),
@@ -13443,14 +13464,6 @@ screen and (prefers-contrast) {
13443
13464
  inline-size: 90%;
13444
13465
  max-inline-size: to-rem(640px)
13445
13466
  }
13446
- @media (min-width:42rem) {
13447
- .cds--content-group__copy,
13448
- .cds--content-group__title,
13449
- :host(c4d-content-group-copy),
13450
- :host(c4d-content-group-heading) {
13451
- inline-size: calc(100% - 2rem)
13452
- }
13453
- }
13454
13467
  .cds--content-group__copy,
13455
13468
  :host(c4d-content-group-copy) {
13456
13469
  -webkit-margin-after: 2rem;
@@ -13482,21 +13495,13 @@ screen and (prefers-contrast) {
13482
13495
  -webkit-padding-end: 0;
13483
13496
  padding-inline-end: 0
13484
13497
  }
13485
- .cds--feature-card,
13486
- .cds--feature-card-large,
13487
13498
  :host(c4d-feature-card),
13488
13499
  :host(c4d-feature-cta) {
13489
- position: relative;
13500
+ display: block;
13490
13501
  border-width: 1px;
13491
13502
  border-style: solid;
13492
13503
  border-color: var(--cds-border-subtle-selected)
13493
13504
  }
13494
- .cds--feature-card-large:hover .cds--image::before,
13495
- .cds--feature-card-large:hover ::slotted([slot=image])::before,
13496
- .cds--feature-card-large:hover c4d-image::before,
13497
- .cds--feature-card:hover .cds--image::before,
13498
- .cds--feature-card:hover ::slotted([slot=image])::before,
13499
- .cds--feature-card:hover c4d-image::before,
13500
13505
  :host(c4d-feature-card):hover .cds--image::before,
13501
13506
  :host(c4d-feature-card):hover ::slotted([slot=image])::before,
13502
13507
  :host(c4d-feature-card):hover c4d-image::before,
@@ -13505,347 +13510,32 @@ screen and (prefers-contrast) {
13505
13510
  :host(c4d-feature-cta):hover c4d-image::before {
13506
13511
  opacity: .08
13507
13512
  }
13508
- .cds--feature-card-large:focus-within,
13509
- .cds--feature-card:focus-within,
13510
13513
  :host(c4d-feature-card):focus-within,
13511
13514
  :host(c4d-feature-cta):focus-within {
13512
13515
  border-color: transparent
13513
13516
  }
13514
- @media (max-width:41.98rem) {
13515
- .cds--feature-card,
13516
- .cds--feature-card-large,
13517
- :host(c4d-feature-card),
13518
- :host(c4d-feature-cta) {
13519
- display: -webkit-box;
13520
- display: -ms-flexbox;
13521
- display: flex;
13522
- -ms-flex-wrap: wrap;
13523
- flex-wrap: wrap;
13524
- margin-inline: -1rem
13525
- }
13526
- }
13527
- .cds--feature-card .cds--card__content,
13528
- .cds--feature-card-large .cds--card__content,
13529
- :host(c4d-feature-card) .cds--card__content,
13530
- :host(c4d-feature-cta) .cds--card__content {
13531
- -webkit-transition: background-color 150ms cubic-bezier(.2,0,.38,.9);
13532
- transition: background-color 150ms cubic-bezier(.2,0,.38,.9)
13533
- }
13534
- .cds--feature-card .cds--image,
13535
- .cds--feature-card ::slotted([slot=image]),
13536
- .cds--feature-card c4d-image,
13537
- .cds--feature-card-large .cds--image,
13538
- .cds--feature-card-large ::slotted([slot=image]),
13539
- .cds--feature-card-large c4d-image,
13540
- :host(c4d-feature-card) .cds--image,
13541
- :host(c4d-feature-card) ::slotted([slot=image]),
13542
- :host(c4d-feature-card) c4d-image,
13543
- :host(c4d-feature-cta) .cds--image,
13544
- :host(c4d-feature-cta) ::slotted([slot=image]),
13545
- :host(c4d-feature-cta) c4d-image {
13546
- block-size: 50%;
13547
- inline-size: 100%
13548
- }
13549
- @media screen and (prefers-reduced-motion:reduce) {
13550
- .cds--feature-card .cds--image::before,
13551
- .cds--feature-card ::slotted([slot=image])::before,
13552
- .cds--feature-card c4d-image::before,
13553
- .cds--feature-card-large .cds--image::before,
13554
- .cds--feature-card-large ::slotted([slot=image])::before,
13555
- .cds--feature-card-large c4d-image::before,
13556
- :host(c4d-feature-card) .cds--image::before,
13557
- :host(c4d-feature-card) ::slotted([slot=image])::before,
13558
- :host(c4d-feature-card) c4d-image::before,
13559
- :host(c4d-feature-cta) .cds--image::before,
13560
- :host(c4d-feature-cta) ::slotted([slot=image])::before,
13561
- :host(c4d-feature-cta) c4d-image::before {
13562
- position: absolute;
13563
- z-index: 1;
13564
- block-size: 100%;
13565
- content: "";
13566
- inline-size: 100%;
13567
- inset-block-start: 0;
13568
- inset-inline-start: 0;
13569
- opacity: 0;
13570
- -webkit-transition: none;
13571
- transition: none
13572
- }
13573
- }
13574
- .cds--feature-card .cds--image::before,
13575
- .cds--feature-card ::slotted([slot=image])::before,
13576
- .cds--feature-card c4d-image::before,
13577
- .cds--feature-card-large .cds--image::before,
13578
- .cds--feature-card-large ::slotted([slot=image])::before,
13579
- .cds--feature-card-large c4d-image::before,
13580
- :host(c4d-feature-card) .cds--image::before,
13581
- :host(c4d-feature-card) ::slotted([slot=image])::before,
13582
- :host(c4d-feature-card) c4d-image::before,
13583
- :host(c4d-feature-cta) .cds--image::before,
13584
- :host(c4d-feature-cta) ::slotted([slot=image])::before,
13585
- :host(c4d-feature-cta) c4d-image::before {
13586
- position: absolute;
13587
- z-index: 1;
13588
- block-size: 100%;
13589
- content: "";
13590
- inline-size: 100%;
13591
- inset-block-start: 0;
13592
- inset-inline-start: 0;
13593
- opacity: 0;
13594
- -webkit-transition: opacity 150ms cubic-bezier(.2,0,.38,.9);
13595
- transition: opacity 150ms cubic-bezier(.2,0,.38,.9)
13596
- }
13597
- :host(c4d-feature-card),
13598
- :host(c4d-feature-cta) {
13599
- display: block;
13600
- outline: 0
13601
- }
13602
- @media (max-width:41.98rem) {
13603
- :host(c4d-feature-card),
13604
- :host(c4d-feature-cta) {
13605
- display: -webkit-box;
13606
- display: -ms-flexbox;
13607
- display: flex
13608
- }
13609
- :host(c4d-feature-card) .cds--card__wrapper,
13610
- :host(c4d-feature-cta) .cds--card__wrapper {
13611
- display: -webkit-box;
13612
- display: -ms-flexbox;
13613
- display: flex;
13614
- block-size: auto;
13615
- min-block-size: 0
13616
- }
13617
- :host(c4d-feature-card) .cds--card__wrapper .cds--card__content,
13618
- :host(c4d-feature-cta) .cds--card__wrapper .cds--card__content {
13619
- padding: 1rem;
13620
- block-size: 100%
13621
- }
13622
- :host(c4d-feature-card) .cds--card--link,
13623
- :host(c4d-feature-cta) .cds--card--link {
13624
- display: block
13625
- }
13626
- .cds--feature-card .cds--card__content,
13627
- :host(c4d-feature-card:not([size=large])) .cds--card__content,
13628
- :host(c4d-feature-cta:not([size=large])) .cds--card__content {
13629
- -webkit-box-pack: justify;
13630
- -ms-flex-pack: justify;
13631
- justify-content: space-between;
13632
- padding: 1rem;
13633
- block-size: 100%
13634
- }
13635
- .cds--feature-card cds--card__heading,
13636
- :host(c4d-feature-card:not([size=large])) cds--card__heading,
13637
- :host(c4d-feature-cta:not([size=large])) cds--card__heading {
13638
- padding: 1rem;
13639
- margin: 0;
13640
- inline-size: 100%;
13641
- -webkit-padding-after: 2rem;
13642
- padding-block-end: 2rem;
13643
- -webkit-padding-end: 10%;
13644
- padding-inline-end: 10%
13645
- }
13646
- .cds--feature-card .cds--card__footer,
13647
- :host(c4d-feature-card:not([size=large])) .cds--card__footer,
13648
- :host(c4d-feature-cta:not([size=large])) .cds--card__footer {
13649
- -webkit-margin-before: -2rem;
13650
- margin-block-start: -2rem;
13651
- -webkit-padding-before: 0;
13652
- padding-block-start: 0
13653
- }
13654
- .cds--feature-card .cds--card__wrapper,
13655
- :host(c4d-feature-card:not([size=large])) .cds--card__wrapper,
13656
- :host(c4d-feature-cta:not([size=large])) .cds--card__wrapper {
13657
- display: -webkit-box;
13658
- display: -ms-flexbox;
13659
- display: flex;
13660
- block-size: auto;
13661
- min-block-size: 0
13662
- }
13663
- .cds--feature-card .cds--card,
13664
- :host(c4d-feature-card:not([size=large])) .cds--card,
13665
- :host(c4d-feature-cta:not([size=large])) .cds--card {
13666
- display: block;
13667
- inset: 0;
13668
- -webkit-padding-before: 0;
13669
- padding-block-start: 0
13670
- }
13671
- }
13672
- .cds--feature-card .cds--card,
13673
- :host(c4d-feature-card:not([size=large])) .cds--card,
13674
- :host(c4d-feature-cta:not([size=large])) .cds--card {
13675
- margin: 0
13676
- }
13677
- .cds--feature-card .cds--card .cds--card__heading,
13678
- .cds--feature-card .cds--card ::slotted(c4d-card-heading),
13679
- :host(c4d-feature-card:not([size=large])) .cds--card .cds--card__heading,
13680
- :host(c4d-feature-card:not([size=large])) .cds--card ::slotted(c4d-card-heading),
13681
- :host(c4d-feature-cta:not([size=large])) .cds--card .cds--card__heading,
13682
- :host(c4d-feature-cta:not([size=large])) .cds--card ::slotted(c4d-card-heading) {
13683
- -webkit-margin-after: 2rem;
13684
- margin-block-end: 2rem
13685
- }
13686
- .cds--feature-card .cds--card:focus-within,
13687
- :host(c4d-feature-card:not([size=large])) .cds--card:focus-within,
13688
- :host(c4d-feature-cta:not([size=large])) .cds--card:focus-within {
13689
- outline: 0;
13690
- outline-offset: 0
13691
- }
13692
- .cds--feature-card .cds--card:focus-within::before,
13693
- :host(c4d-feature-card:not([size=large])) .cds--card:focus-within::before,
13694
- :host(c4d-feature-cta:not([size=large])) .cds--card:focus-within::before {
13695
- position: absolute;
13696
- z-index: 1;
13697
- display: block;
13698
- border: .125rem solid var(--cds-focus,#0f62fe);
13699
- content: "";
13700
- inset: -1px;
13701
- outline: 1px solid var(--cds-focus-inset,#fff);
13702
- outline-offset: -3px
13703
- }
13704
- @media (max-width:41.98rem) {
13705
- .cds--feature-card .cds--card:focus-within::before,
13706
- :host(c4d-feature-card:not([size=large])) .cds--card:focus-within::before,
13707
- :host(c4d-feature-cta:not([size=large])) .cds--card:focus-within::before {
13708
- min-block-size: 292px
13709
- }
13710
- }
13711
- .cds--feature-card .cds--card__heading,
13712
- :host(c4d-feature-card:not([size=large])) .cds--card__heading,
13713
- :host(c4d-feature-cta:not([size=large])) .cds--card__heading {
13714
- -webkit-margin-after: 2rem;
13715
- margin-block-end: 2rem
13716
- }
13717
- .cds--feature-card .cds--card__wrapper,
13718
- :host(c4d-feature-card:not([size=large])) .cds--card__wrapper,
13719
- :host(c4d-feature-cta:not([size=large])) .cds--card__wrapper {
13720
- block-size: 50%;
13721
- inline-size: 100%
13722
- }
13723
- .cds--feature-card .cds--card__wrapper .cds--card__content,
13724
- :host(c4d-feature-card:not([size=large])) .cds--card__wrapper .cds--card__content,
13725
- :host(c4d-feature-cta:not([size=large])) .cds--card__wrapper .cds--card__content {
13726
- block-size: auto;
13727
- min-block-size: 100%
13728
- }
13729
- .cds--feature-card .cds--image,
13730
- .cds--feature-card ::slotted([slot=image]),
13731
- .cds--feature-card c4d-image,
13732
- :host(c4d-feature-card:not([size=large])) .cds--image,
13733
- :host(c4d-feature-card:not([size=large])) ::slotted([slot=image]),
13734
- :host(c4d-feature-card:not([size=large])) c4d-image,
13735
- :host(c4d-feature-cta:not([size=large])) .cds--image,
13736
- :host(c4d-feature-cta:not([size=large])) ::slotted([slot=image]),
13737
- :host(c4d-feature-cta:not([size=large])) c4d-image {
13738
- z-index: 0
13739
- }
13740
13517
  @media (min-width:42rem) {
13741
- .cds--feature-card .cds--card,
13742
- :host(c4d-feature-card:not([size=large])) .cds--card,
13743
- :host(c4d-feature-cta:not([size=large])) .cds--card {
13518
+ .cds--content-group__copy,
13519
+ .cds--content-group__title,
13520
+ :host(c4d-content-group-copy),
13521
+ :host(c4d-content-group-heading) {
13522
+ inline-size: calc(100% - 2rem)
13523
+ }
13524
+ :host(c4d-feature-card) .cds--card,
13525
+ :host(c4d-feature-cta) .cds--card {
13744
13526
  -webkit-box-orient: horizontal;
13745
13527
  -webkit-box-direction: normal;
13746
13528
  -ms-flex-direction: row;
13747
13529
  flex-direction: row
13748
13530
  }
13749
- .cds--feature-card .cds--card__wrapper,
13750
- :host(c4d-feature-card:not([size=large])) .cds--card__wrapper,
13751
- :host(c4d-feature-cta:not([size=large])) .cds--card__wrapper {
13752
- block-size: auto;
13753
- inline-size: 50%
13754
- }
13755
- .cds--feature-card .cds--image,
13756
- .cds--feature-card ::slotted([slot=image]),
13757
- .cds--feature-card c4d-image,
13758
- :host(c4d-feature-card:not([size=large])) .cds--image,
13759
- :host(c4d-feature-card:not([size=large])) ::slotted([slot=image]),
13760
- :host(c4d-feature-card:not([size=large])) c4d-image,
13761
- :host(c4d-feature-cta:not([size=large])) .cds--image,
13762
- :host(c4d-feature-cta:not([size=large])) ::slotted([slot=image]),
13763
- :host(c4d-feature-cta:not([size=large])) c4d-image {
13764
- block-size: 100%;
13765
- inline-size: 50%;
13766
- -webkit-padding-before: 50%;
13767
- padding-block-start: 50%
13768
- }
13769
- }
13770
- .cds--feature-card .cds--feature-card__card .cds--card__footer,
13771
- :host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer,
13772
- :host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer {
13773
- -webkit-box-orient: horizontal;
13774
- -webkit-box-direction: reverse;
13775
- -ms-flex-direction: row-reverse;
13776
- flex-direction: row-reverse
13777
- }
13778
- .cds--feature-card .cds--feature-card__card .cds--card__footer svg,
13779
- :host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer svg,
13780
- :host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer svg {
13781
- block-size: to-rem(20px);
13782
- inline-size: to-rem(20px)
13783
- }
13784
- @media (min-width:42rem) {
13785
- .cds--feature-card .cds--feature-card__card .cds--card__footer svg,
13786
- :host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer svg,
13787
- :host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer svg {
13788
- block-size: 1.5rem;
13789
- inline-size: 1.5rem
13790
- }
13791
- }
13792
- @media (min-width:99rem) {
13793
- .cds--content-group__title,
13794
- :host(c4d-content-group-heading) {
13795
- font-weight: 400;
13796
- font-size: 2rem
13797
- }
13798
- .cds--feature-card .cds--feature-card__card .cds--card__footer svg,
13799
- :host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer svg,
13800
- :host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer svg {
13801
- block-size: 2rem;
13802
- inline-size: 2rem
13803
- }
13804
- }
13805
- .cds--feature-card ::slotted(svg[slot=footer]),
13806
- :host(c4d-feature-card:not([size=large])) ::slotted(svg[slot=footer]),
13807
- :host(c4d-feature-cta:not([size=large])) ::slotted(svg[slot=footer]) {
13808
- -webkit-margin-before: auto;
13809
- margin-block-start: auto;
13810
- -webkit-margin-start: auto;
13811
- margin-inline-start: auto
13812
- }
13813
- :host(c4d-feature-card[size=large]),
13814
- :host(c4d-feature-cta[size=large]) {
13815
- position: relative;
13816
- background-color: var(--cds-layer-01,#f4f4f4);
13817
- color: var(--cds-text-primary,#161616);
13818
- -webkit-margin-after: 2rem;
13819
- margin-block-end: 2rem;
13820
- margin-inline: 2rem/-2
13821
- }
13822
- @media (min-width:42rem) {
13823
- :host(c4d-feature-card[size=large]),
13824
- :host(c4d-feature-cta[size=large]) {
13825
- -webkit-margin-after: 4rem;
13826
- margin-block-end: 4rem;
13827
- -webkit-padding-before: 50%;
13828
- padding-block-start: 50%
13829
- }
13830
13531
  }
13831
- @media (min-width:66rem) {
13832
- :host(c4d-feature-card[size=large]),
13833
- :host(c4d-feature-cta[size=large]) {
13834
- -webkit-margin-after: 6rem;
13835
- margin-block-end: 6rem
13836
- }
13837
- }
13838
- :host(c4d-feature-card[size=large]) .cds--card,
13839
- :host(c4d-feature-cta[size=large]) .cds--card {
13840
- block-size: 100%
13841
- }
13842
- :host(c4d-feature-card[size=large]) .cds--card:focus-within,
13843
- :host(c4d-feature-cta[size=large]) .cds--card:focus-within {
13532
+ :host(c4d-feature-card) .cds--card:focus-within,
13533
+ :host(c4d-feature-cta) .cds--card:focus-within {
13844
13534
  outline: 0;
13845
13535
  outline-offset: 0
13846
13536
  }
13847
- :host(c4d-feature-card[size=large]) .cds--card:focus-within::before,
13848
- :host(c4d-feature-cta[size=large]) .cds--card:focus-within::before {
13537
+ :host(c4d-feature-card) .cds--card:focus-within::before,
13538
+ :host(c4d-feature-cta) .cds--card:focus-within::before {
13849
13539
  position: absolute;
13850
13540
  z-index: 1;
13851
13541
  display: block;
@@ -13856,158 +13546,59 @@ screen and (prefers-contrast) {
13856
13546
  outline-offset: -3px
13857
13547
  }
13858
13548
  @media (max-width:41.98rem) {
13859
- .cds--feature-card .cds--feature-card__card .cds--card__footer,
13860
- :host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer,
13861
- :host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer {
13862
- -webkit-box-orient: horizontal;
13863
- -webkit-box-direction: normal;
13864
- -ms-flex-direction: row;
13865
- flex-direction: row
13549
+ :host(c4d-feature-card) .cds--card,
13550
+ :host(c4d-feature-cta) .cds--card {
13551
+ display: block
13866
13552
  }
13867
- :host(c4d-feature-card[size=large]) .cds--card:focus-within::before,
13868
- :host(c4d-feature-cta[size=large]) .cds--card:focus-within::before {
13553
+ :host(c4d-feature-card) .cds--card:focus-within::before,
13554
+ :host(c4d-feature-cta) .cds--card:focus-within::before {
13869
13555
  min-block-size: 292px
13870
13556
  }
13871
13557
  }
13872
- :host(c4d-feature-card[size=large]) .cds--card .cds--image,
13873
- :host(c4d-feature-card[size=large]) .cds--card ::slotted([slot=image]),
13874
- :host(c4d-feature-card[size=large]) .cds--card c4d-image,
13875
- :host(c4d-feature-cta[size=large]) .cds--card .cds--image,
13876
- :host(c4d-feature-cta[size=large]) .cds--card ::slotted([slot=image]),
13877
- :host(c4d-feature-cta[size=large]) .cds--card c4d-image {
13878
- z-index: 0
13879
- }
13880
- @media (min-width:42rem) {
13881
- :host(c4d-feature-card[size=large]) .cds--card,
13882
- :host(c4d-feature-cta[size=large]) .cds--card {
13883
- position: absolute;
13884
- -webkit-box-orient: horizontal;
13885
- -webkit-box-direction: normal;
13886
- -ms-flex-direction: row;
13887
- flex-direction: row;
13888
- inset: 0
13889
- }
13890
- :host(c4d-feature-card[size=large]) .cds--card .cds--image,
13891
- :host(c4d-feature-card[size=large]) .cds--card ::slotted([slot=image]),
13892
- :host(c4d-feature-card[size=large]) .cds--card c4d-image,
13893
- :host(c4d-feature-cta[size=large]) .cds--card .cds--image,
13894
- :host(c4d-feature-cta[size=large]) .cds--card ::slotted([slot=image]),
13895
- :host(c4d-feature-cta[size=large]) .cds--card c4d-image {
13896
- block-size: 100%;
13897
- inline-size: 50%;
13898
- -webkit-padding-before: 50%;
13899
- padding-block-start: 50%
13900
- }
13901
- }
13902
- @media (min-width:82rem) {
13903
- :host(c4d-feature-card[size=large]),
13904
- :host(c4d-feature-cta[size=large]) {
13905
- -webkit-padding-before: 50%;
13906
- padding-block-start: 50%
13907
- }
13908
- :host(c4d-feature-card[size=large]) .cds--card .cds--image,
13909
- :host(c4d-feature-card[size=large]) .cds--card ::slotted([slot=image]),
13910
- :host(c4d-feature-card[size=large]) .cds--card c4d-image,
13911
- :host(c4d-feature-cta[size=large]) .cds--card .cds--image,
13912
- :host(c4d-feature-cta[size=large]) .cds--card ::slotted([slot=image]),
13913
- :host(c4d-feature-cta[size=large]) .cds--card c4d-image {
13914
- block-size: 100%
13915
- }
13916
- }
13917
- :host(c4d-feature-card[size=large]) .cds--card .cds--image,
13918
- :host(c4d-feature-cta[size=large]) .cds--card .cds--image {
13919
- overflow-y: hidden
13920
- }
13921
- :host(c4d-feature-card[size=large]) .cds--card__wrapper,
13922
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper {
13923
- block-size: auto;
13924
- min-block-size: 50%
13925
- }
13926
- :host(c4d-feature-card[size=large]) .cds--card__wrapper::before,
13927
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper::before {
13928
- -webkit-padding-before: 0;
13929
- padding-block-start: 0
13930
- }
13931
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
13932
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__eyebrow,
13933
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__heading,
13934
- :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
13935
- :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading),
13936
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy,
13937
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__eyebrow,
13938
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__heading,
13939
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
13940
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading) {
13941
- inline-size: 100%;
13942
- max-inline-size: to-rem(480px)
13943
- }
13944
- @media (min-width:42rem) {
13945
- :host(c4d-feature-card[size=large]) .cds--card__wrapper::before,
13946
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper::before {
13947
- -webkit-padding-before: 50%;
13948
- padding-block-start: 50%
13949
- }
13950
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
13951
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__eyebrow,
13952
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__heading,
13953
- :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
13954
- :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading),
13955
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy,
13956
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__eyebrow,
13957
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__heading,
13958
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
13959
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading) {
13960
- inline-size: 90%
13961
- }
13962
- }
13963
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__content,
13964
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__content {
13965
- padding: 2rem 1rem 1rem
13966
- }
13967
- @media (min-width:42rem) {
13968
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__content,
13969
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__content {
13970
- padding: 1rem
13971
- }
13558
+ :host(c4d-feature-card) .cds--card__image-wrapper,
13559
+ :host(c4d-feature-card) .cds--card__wrapper,
13560
+ :host(c4d-feature-cta) .cds--card__image-wrapper,
13561
+ :host(c4d-feature-cta) .cds--card__wrapper {
13562
+ -webkit-box-flex: 1;
13563
+ -ms-flex: 1 0 50%;
13564
+ flex: 1 0 50%
13972
13565
  }
13973
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__eyebrow,
13974
- :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
13975
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__eyebrow,
13976
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow) {
13977
- margin: 0 0 .5rem
13566
+ :host(c4d-feature-card) .cds--card__wrapper::after,
13567
+ :host(c4d-feature-card) .cds--card__wrapper::before,
13568
+ :host(c4d-feature-cta) .cds--card__wrapper::after,
13569
+ :host(c4d-feature-cta) .cds--card__wrapper::before {
13570
+ display: none
13978
13571
  }
13979
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__heading,
13980
- :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading),
13981
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__heading,
13982
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading) {
13983
- -webkit-margin-after: 2rem;
13984
- margin-block-end: 2rem;
13985
- font-size: var(--cds-heading-03-font-size,1.25rem);
13986
- font-weight: var(--cds-heading-03-font-weight,400);
13987
- line-height: var(--cds-heading-03-line-height,1.4);
13988
- letter-spacing: var(--cds-heading-03-letter-spacing,0)
13572
+ :host(c4d-feature-card) .cds--card__content,
13573
+ :host(c4d-feature-cta) .cds--card__content {
13574
+ -webkit-box-pack: justify;
13575
+ -ms-flex-pack: justify;
13576
+ justify-content: space-between;
13577
+ padding: 1rem;
13578
+ aspect-ratio: 2/1;
13579
+ -webkit-transition: background-color 150ms cubic-bezier(.2,0,.38,.9);
13580
+ transition: background-color 150ms cubic-bezier(.2,0,.38,.9)
13989
13581
  }
13990
- @media (min-width:66rem) {
13991
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__heading,
13992
- :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading),
13993
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__heading,
13994
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading) {
13995
- font-size: var(--cds-heading-04-font-size,1.75rem);
13996
- font-weight: var(--cds-heading-04-font-weight,400);
13997
- line-height: var(--cds-heading-04-line-height,1.28572);
13998
- letter-spacing: var(--cds-heading-04-letter-spacing,0)
13999
- }
13582
+ :host(c4d-feature-card) .cds--card__eyebrow-wrapper--empty,
13583
+ :host(c4d-feature-card) .cds--card__pictogram-wrapper--empty,
13584
+ :host(c4d-feature-cta) .cds--card__eyebrow-wrapper--empty,
13585
+ :host(c4d-feature-cta) .cds--card__pictogram-wrapper--empty {
13586
+ display: none
14000
13587
  }
14001
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
14002
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy {
13588
+ :host(c4d-feature-card) .cds--card__copy,
13589
+ :host(c4d-feature-cta) .cds--card__copy {
14003
13590
  font-size: var(--cds-body-02-font-size,1rem);
14004
13591
  font-weight: var(--cds-body-02-font-weight,400);
14005
13592
  line-height: var(--cds-body-02-line-height,1.5);
14006
13593
  letter-spacing: var(--cds-body-02-letter-spacing,0)
14007
13594
  }
14008
13595
  @media (min-width:42rem) {
14009
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
14010
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy {
13596
+ :host(c4d-feature-card) .cds--card__content,
13597
+ :host(c4d-feature-cta) .cds--card__content {
13598
+ aspect-ratio: auto
13599
+ }
13600
+ :host(c4d-feature-card) .cds--card__copy,
13601
+ :host(c4d-feature-cta) .cds--card__copy {
14011
13602
  font-size: var(--cds-body-01-font-size,.875rem);
14012
13603
  font-weight: var(--cds-body-01-font-weight,400);
14013
13604
  line-height: var(--cds-body-01-line-height,1.42857);
@@ -14015,111 +13606,64 @@ screen and (prefers-contrast) {
14015
13606
  }
14016
13607
  }
14017
13608
  @media (min-width:66rem) {
14018
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
14019
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy {
13609
+ :host(c4d-feature-card) .cds--card__copy,
13610
+ :host(c4d-feature-cta) .cds--card__copy {
14020
13611
  font-size: var(--cds-body-02-font-size,1rem);
14021
13612
  font-weight: var(--cds-body-02-font-weight,400);
14022
13613
  line-height: var(--cds-body-02-line-height,1.5);
14023
13614
  letter-spacing: var(--cds-body-02-letter-spacing,0)
14024
13615
  }
14025
13616
  }
14026
- @media (max-width:41.98rem) {
14027
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
14028
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy {
14029
- -webkit-margin-after: 2rem;
14030
- margin-block-end: 2rem
14031
- }
14032
- .cds--content-block-mixed .cds--layout-1-3 .cds--link-list__list.cds--link-list__list--card,
14033
- :host(cds-content-block-mixed) .cds--layout-1-3 .cds--link-list__list.cds--link-list__list--card {
14034
- -webkit-margin-end: -1rem;
14035
- margin-inline-end: -1rem
14036
- }
14037
- }
14038
- @media (min-width:42rem) and (max-width:66rem) {
14039
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy ::slotted(*),
14040
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy ::slotted(*) {
14041
- display: -webkit-box;
14042
- block-size: 100%;
14043
- -webkit-box-orient: vertical;
14044
- -webkit-line-clamp: 8;
14045
- white-space: normal;
14046
- word-break: break-word
14047
- }
13617
+ :host(c4d-feature-card) ::slotted([slot=image]),
13618
+ :host(c4d-feature-card) c4d-image,
13619
+ :host(c4d-feature-cta) ::slotted([slot=image]),
13620
+ :host(c4d-feature-cta) c4d-image {
13621
+ z-index: 0
14048
13622
  }
14049
- :host(c4d-feature-card[size=large]) .cds--card__footer,
14050
- :host(c4d-feature-cta[size=large]) .cds--card__footer {
14051
- -webkit-box-orient: horizontal;
14052
- -webkit-box-direction: normal;
14053
- -ms-flex-direction: row;
14054
- flex-direction: row
13623
+ :host(c4d-feature-card) ::slotted([slot=image])::before,
13624
+ :host(c4d-feature-card) c4d-image::before,
13625
+ :host(c4d-feature-cta) ::slotted([slot=image])::before,
13626
+ :host(c4d-feature-cta) c4d-image::before {
13627
+ position: absolute;
13628
+ z-index: 1;
13629
+ block-size: 100%;
13630
+ content: "";
13631
+ inline-size: 100%;
13632
+ inset-block-start: 0;
13633
+ inset-inline-start: 0;
13634
+ opacity: 0;
13635
+ -webkit-transition: opacity 150ms cubic-bezier(.2,0,.38,.9);
13636
+ transition: opacity 150ms cubic-bezier(.2,0,.38,.9)
14055
13637
  }
14056
- @media (min-width:82rem) {
14057
- :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__content,
14058
- :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__content {
14059
- padding: 2rem
14060
- }
14061
- :host(c4d-feature-card[size=large]) .cds--card__footer,
14062
- :host(c4d-feature-cta[size=large]) .cds--card__footer {
14063
- -webkit-box-orient: horizontal;
14064
- -webkit-box-direction: reverse;
14065
- -ms-flex-direction: row-reverse;
14066
- flex-direction: row-reverse
13638
+ @media screen and (prefers-reduced-motion:reduce) {
13639
+ :host(c4d-feature-card) ::slotted([slot=image])::before,
13640
+ :host(c4d-feature-card) c4d-image::before,
13641
+ :host(c4d-feature-cta) ::slotted([slot=image])::before,
13642
+ :host(c4d-feature-cta) c4d-image::before {
13643
+ -webkit-transition: none;
13644
+ transition: none
14067
13645
  }
14068
13646
  }
14069
- @media (min-width:752px) {
14070
- :host(c4d-feature-card[size=large]).cds--feature-card-large_no-copy-text,
14071
- :host(c4d-feature-cta[size=large]).cds--feature-card-large_no-copy-text {
14072
- -webkit-padding-before: 50%;
14073
- padding-block-start: 50%
14074
- }
14075
- :host(c4d-feature-card[size=large]).cds--feature-card-large_no-copy-text .cds--card,
14076
- :host(c4d-feature-cta[size=large]).cds--feature-card-large_no-copy-text .cds--card {
14077
- position: absolute;
14078
- -webkit-box-orient: horizontal;
14079
- -webkit-box-direction: normal;
14080
- -ms-flex-direction: row;
14081
- flex-direction: row;
14082
- inset: 0
14083
- }
14084
- :host(c4d-feature-card[size=large]).cds--feature-card-large_no-copy-text .cds--card .cds--image,
14085
- :host(c4d-feature-card[size=large]).cds--feature-card-large_no-copy-text .cds--card__wrapper,
14086
- :host(c4d-feature-cta[size=large]).cds--feature-card-large_no-copy-text .cds--card .cds--image,
14087
- :host(c4d-feature-cta[size=large]).cds--feature-card-large_no-copy-text .cds--card__wrapper {
14088
- block-size: 100%;
14089
- inline-size: 50%
14090
- }
13647
+ :host(c4d-feature-card) ::slotted(c4d-card-eyebrow),
13648
+ :host(c4d-feature-card) ::slotted(c4d-card-heading),
13649
+ :host(c4d-feature-cta) ::slotted(c4d-card-eyebrow),
13650
+ :host(c4d-feature-cta) ::slotted(c4d-card-heading) {
13651
+ inline-size: 100%
14091
13652
  }
14092
- .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta,
14093
- .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta:visited,
14094
- :host(c4d-feature-card-footer) .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
14095
- float: none;
14096
- -webkit-margin-before: auto;
14097
- margin-block-start: auto;
14098
- block-size: to-rem(20px);
14099
- inline-size: to-rem(20px);
14100
- font-size: var(--cds-productive-heading-05-font-size,2rem);
14101
- font-weight: var(--cds-productive-heading-05-font-weight,400);
14102
- line-height: var(--cds-productive-heading-05-line-height,1.25);
14103
- letter-spacing: var(--cds-productive-heading-05-letter-spacing,0)
13653
+ :host(c4d-feature-card) ::slotted(c4d-card-heading),
13654
+ :host(c4d-feature-cta) ::slotted(c4d-card-heading) {
13655
+ -webkit-margin-after: 2rem;
13656
+ margin-block-end: 2rem
14104
13657
  }
14105
- @media (min-width:42rem) {
14106
- .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta,
14107
- .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta:visited,
14108
- :host(c4d-feature-card-footer) .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
14109
- block-size: 1.5rem;
14110
- inline-size: 1.5rem
14111
- }
13658
+ :host(c4d-feature-card) ::slotted(c4d-card-eyebrow),
13659
+ :host(c4d-feature-cta) ::slotted(c4d-card-eyebrow) {
13660
+ -webkit-margin-end: .5rem;
13661
+ margin-inline-end: .5rem
14112
13662
  }
14113
13663
  :host(c4d-feature-card)[color-scheme=inverse],
14114
13664
  :host(c4d-feature-cta)[color-scheme=inverse] {
14115
13665
  border-color: var(--cds-border-inverse,#161616)
14116
13666
  }
14117
- :host(c4d-feature-card)[color-scheme=inverse] .cds--card__heading,
14118
- :host(c4d-feature-card)[color-scheme=inverse] ::slotted(c4d-card-heading),
14119
- :host(c4d-feature-cta)[color-scheme=inverse] .cds--card__heading,
14120
- :host(c4d-feature-cta)[color-scheme=inverse] ::slotted(c4d-card-heading) {
14121
- color: var(--cds-icon-inverse,#fff)
14122
- }
14123
13667
  :host(c4d-feature-card)[color-scheme=inverse] ::slotted(c4d-card-heading),
14124
13668
  :host(c4d-feature-cta)[color-scheme=inverse] ::slotted(c4d-card-heading) {
14125
13669
  color: var(--cds-focus-inset,#fff)
@@ -14136,10 +13680,6 @@ screen and (prefers-contrast) {
14136
13680
  :host(c4d-feature-cta)[color-scheme=inverse] c4d-image::before {
14137
13681
  background-color: var(--cds-icon-inverse,#fff)
14138
13682
  }
14139
- :host(c4d-feature-card:not([size=large]))[color-scheme=inverse] .cds--card__heading,
14140
- :host(c4d-feature-cta:not([size=large]))[color-scheme=inverse] .cds--card__heading {
14141
- color: var(--cds-icon-inverse,#fff)
14142
- }
14143
13683
  :host(c4d-feature-card:not([size=large]))[color-scheme=inverse] .cds--card__wrapper,
14144
13684
  :host(c4d-feature-cta:not([size=large]))[color-scheme=inverse] .cds--card__wrapper {
14145
13685
  background-color: var(--cds-background-inverse,#393939)
@@ -14158,12 +13698,10 @@ screen and (prefers-contrast) {
14158
13698
  }
14159
13699
  :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__copy,
14160
13700
  :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__eyebrow,
14161
- :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__heading,
14162
13701
  :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-eyebrow),
14163
13702
  :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading),
14164
13703
  :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__copy,
14165
13704
  :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__eyebrow,
14166
- :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__heading,
14167
13705
  :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-eyebrow),
14168
13706
  :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading) {
14169
13707
  color: var(--cds-icon-inverse,#fff)
@@ -14174,9 +13712,7 @@ screen and (prefers-contrast) {
14174
13712
  :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-eyebrow) {
14175
13713
  color: var(--cds-icon-inverse,#fff)
14176
13714
  }
14177
- :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__heading,
14178
13715
  :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading),
14179
- :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__heading,
14180
13716
  :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading) {
14181
13717
  color: var(--cds-icon-inverse,#fff)
14182
13718
  }
@@ -14192,6 +13728,17 @@ screen and (prefers-contrast) {
14192
13728
  justify-content: flex-end
14193
13729
  }
14194
13730
  @media (min-width:82rem) {
13731
+ :host(c4d-feature-card)[size=large] .cds--card__content,
13732
+ :host(c4d-feature-cta)[size=large] .cds--card__content {
13733
+ padding: 2rem
13734
+ }
13735
+ :host(c4d-feature-card)[size=large] ::slotted(c4d-card-heading),
13736
+ :host(c4d-feature-cta)[size=large] ::slotted(c4d-card-heading) {
13737
+ font-size: var(--cds-heading-04-font-size,1.75rem);
13738
+ font-weight: var(--cds-heading-04-font-weight,400);
13739
+ line-height: var(--cds-heading-04-line-height,1.28572);
13740
+ letter-spacing: var(--cds-heading-04-letter-spacing,0)
13741
+ }
14195
13742
  :host(c4d-feature-card[size=large]) ::slotted(c4d-feature-card-footer) {
14196
13743
  -webkit-box-pack: end;
14197
13744
  -ms-flex-pack: end;
@@ -14207,13 +13754,21 @@ screen and (prefers-contrast) {
14207
13754
  -ms-flex-pack: end;
14208
13755
  justify-content: flex-end
14209
13756
  }
14210
- @media (min-width:99rem) {
14211
- .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta,
14212
- .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta:visited,
14213
- :host(c4d-feature-card-footer) .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
14214
- block-size: 2rem;
14215
- inline-size: 2rem
13757
+ @media (min-width:42rem) {
13758
+ :host(c4d-feature-card) ::slotted(c4d-card-eyebrow),
13759
+ :host(c4d-feature-card) ::slotted(c4d-card-heading),
13760
+ :host(c4d-feature-cta) ::slotted(c4d-card-eyebrow),
13761
+ :host(c4d-feature-cta) ::slotted(c4d-card-heading) {
13762
+ inline-size: 90%
14216
13763
  }
13764
+ :host(c4d-feature-card-footer),
13765
+ :host(c4d-feature-cta-footer) {
13766
+ -webkit-box-pack: end;
13767
+ -ms-flex-pack: end;
13768
+ justify-content: flex-end
13769
+ }
13770
+ }
13771
+ @media (min-width:99rem) {
14217
13772
  :host(c4d-feature-card-footer)[size=large] .c4d-ce--card__footer ::slotted(svg[slot=icon]),
14218
13773
  :host(c4d-feature-cta-footer)[size=large] .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
14219
13774
  block-size: 4rem;
@@ -14726,25 +14281,6 @@ screen and (prefers-contrast) {
14726
14281
  display: grid;
14727
14282
  margin-inline: -1rem
14728
14283
  }
14729
- @media (min-width:42rem) {
14730
- :host(c4d-feature-card-footer),
14731
- :host(c4d-feature-cta-footer) {
14732
- -webkit-box-pack: end;
14733
- -ms-flex-pack: end;
14734
- justify-content: flex-end
14735
- }
14736
- .cds--content-group-cards .cds--content-group__copy,
14737
- .cds--content-group-cards ::slotted([slot=copy]),
14738
- :host(c4d-content-group-cards) .cds--content-group__copy,
14739
- :host(c4d-content-group-cards) ::slotted([slot=copy]) {
14740
- -webkit-margin-after: 4rem;
14741
- margin-block-end: 4rem
14742
- }
14743
- .cds--content-group-cards__row {
14744
- grid-auto-rows: 1fr;
14745
- grid-template-columns: 1fr 1fr
14746
- }
14747
- }
14748
14284
  .cds--content-group-cards-item__col,
14749
14285
  :host(c4d-content-group-cards-item) {
14750
14286
  margin-block: 2rem/2;
@@ -14798,6 +14334,17 @@ screen and (prefers-contrast) {
14798
14334
  padding-inline: 0 1rem
14799
14335
  }
14800
14336
  @media (min-width:42rem) {
14337
+ .cds--content-group-cards .cds--content-group__copy,
14338
+ .cds--content-group-cards ::slotted([slot=copy]),
14339
+ :host(c4d-content-group-cards) .cds--content-group__copy,
14340
+ :host(c4d-content-group-cards) ::slotted([slot=copy]) {
14341
+ -webkit-margin-after: 4rem;
14342
+ margin-block-end: 4rem
14343
+ }
14344
+ .cds--content-group-cards__row {
14345
+ grid-auto-rows: 1fr;
14346
+ grid-template-columns: 1fr 1fr
14347
+ }
14801
14348
  .cds--pictogram-item .cds--pictogram-item__wrapper,
14802
14349
  :host(c4d-pictogram-item) .cds--pictogram-item__wrapper {
14803
14350
  display: block;
@@ -14918,6 +14465,11 @@ div.cds--content-group-pictograms .cds--content-group__title {
14918
14465
  padding-inline-start: 0
14919
14466
  }
14920
14467
  @media (max-width:41.98rem) {
14468
+ .cds--content-block-mixed .cds--layout-1-3 .cds--link-list__list.cds--link-list__list--card,
14469
+ :host(cds-content-block-mixed) .cds--layout-1-3 .cds--link-list__list.cds--link-list__list--card {
14470
+ -webkit-margin-end: -1rem;
14471
+ margin-inline-end: -1rem
14472
+ }
14921
14473
  .cds--content-block-segmented .cds--content-group__cta-row,
14922
14474
  :host(c4d-content-block-segmented) .cds--content-group__cta-row {
14923
14475
  -webkit-margin-start: 0;