@adyen/kyc-components 2.63.0 → 2.64.0

package/dist/style.css

@@ -1,5 +1,6 @@
 /* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -24,8 +25,10 @@
 .adyen-kyc-summary-section {
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
-.adyen-layout-lg .adyen-kyc-summary-section {
-  padding-left: var(--adyen-sdk-spacer-120, 48px);
+@container main (min-width: 1024px) {
+  .adyen-kyc-summary-section {
+    padding-left: var(--adyen-sdk-spacer-120, 48px);
+  }
 }
 .adyen-kyc-summary-section__header {
   display: flex;
@@ -45,8 +48,10 @@
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   margin-bottom: var(--adyen-sdk-spacer-060, 12px);
 }
-.adyen-layout-xs-only .adyen-kyc-summary-section__field {
-  flex-direction: column;
+@container main (max-width: 680px) {
+  .adyen-kyc-summary-section__field {
+    flex-direction: column;
+  }
 }
 .adyen-kyc-summary-section__field:last-child {
   margin-bottom: var(--adyen-sdk-spacer-000, 0px);
@@ -61,8 +66,10 @@
 .adyen-kyc-summary-section__data {
   margin: var(--adyen-sdk-spacer-000, 0px);
 }
-.adyen-layout-xs-only .adyen-kyc-summary-section__data {
-  margin-top: var(--adyen-sdk-spacer-010, 2px);
+@container main (max-width: 680px) {
+  .adyen-kyc-summary-section__data {
+    margin-top: var(--adyen-sdk-spacer-010, 2px);
+  }
 }
 .adyen-kyc-summary__legal-caption {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
@@ -72,6 +79,7 @@
   line-height: var(--adyen-sdk-text-caption-line-height, 18px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -215,6 +223,7 @@ button[disabled]:hover {
   color: var(--adyen-sdk-color-label-disabled, #8d95a3);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -296,6 +305,7 @@ button[disabled]:hover {
   display: inline-block;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -375,6 +385,7 @@ button[disabled]:hover {
   margin-bottom: var(--adyen-sdk-spacer-080, 20px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -631,6 +642,7 @@ button[disabled]:hover {
   padding-left: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -848,6 +860,7 @@ button[disabled]:hover {
   background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -925,6 +938,7 @@ button[disabled]:hover {
   display: flex;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -993,6 +1007,7 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1054,9 +1069,11 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-title-line-height, 26px);
   letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
 }
-.adyen-layout-xs-only .adyen-kyc-typography--title {
-  font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
-  line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title {
+    font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
+    line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
+  }
 }
 .adyen-kyc-typography--title-m {
   font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
@@ -1065,9 +1082,11 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
   letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
 }
-.adyen-layout-xs-only .adyen-kyc-typography--title-m {
-  font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
-  line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title-m {
+    font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
+    line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
+  }
 }
 .adyen-kyc-typography--title-l {
   font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
@@ -1076,9 +1095,11 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
   letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
 }
-.adyen-layout-xs-only .adyen-kyc-typography--title-l {
-  font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
-  line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title-l {
+    font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
+    line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
+  }
 }
 .adyen-kyc-typography--primary {
   color: var(--adyen-sdk-color-label-primary, #00112c);
@@ -1179,6 +1200,7 @@ button[disabled]:hover {
   z-index: 0;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1202,6 +1224,7 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-title-line-height, 26px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1329,18 +1352,21 @@ button[disabled]:hover {
   right: 0;
 }
 
-.adyen-layout-xs-only [class*=adyen-kyc-field--col-] {
-  width: 100%;
-}
-
-.adyen-layout-md .adyen-kyc-field-wrapper {
-  flex-wrap: nowrap;
-}
-.adyen-layout-md .adyen-kyc-field-wrapper > .adyen-kyc-field:first-child {
-  margin-right: var(--adyen-sdk-spacer-040, 8px);
+@container main (max-width: 680px) {
+  [class*=adyen-kyc-field--col-] {
+    width: 100%;
+  }
 }
-.adyen-layout-md .adyen-kyc-field-wrapper > .adyen-kyc-field:nth-child(2) {
-  margin-left: var(--adyen-sdk-spacer-040, 8px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-field-wrapper {
+    flex-wrap: nowrap;
+  }
+  .adyen-kyc-field-wrapper > .adyen-kyc-field:first-child {
+    margin-right: var(--adyen-sdk-spacer-040, 8px);
+  }
+  .adyen-kyc-field-wrapper > .adyen-kyc-field:nth-child(2) {
+    margin-left: var(--adyen-sdk-spacer-040, 8px);
+  }
 }.adyen-kyc-company-registration-details fieldset {
   border: 0;
   padding: 0;
@@ -1392,6 +1418,7 @@ button[disabled]:hover {
   color: inherit;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1530,6 +1557,7 @@ button[disabled]:hover {
   font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1548,8 +1576,10 @@ button[disabled]:hover {
   padding-right: var(--adyen-sdk-spacer-070, 16px);
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }
-.adyen-layout-md .adyen-kyc-radio-group-card__label {
-  padding-right: var(--adyen-sdk-spacer-000, 0px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-radio-group-card__label {
+    padding-right: var(--adyen-sdk-spacer-000, 0px);
+  }
 }
 .adyen-kyc-radio-group-card__subtitle {
   color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
@@ -1575,6 +1605,7 @@ button[disabled]:hover {
   top: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1630,6 +1661,7 @@ button[disabled]:hover {
   margin-bottom: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1689,6 +1721,7 @@ button[disabled]:hover {
   background-color: var(--adyen-sdk-color-background-critical-strong, #e22d2d);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1738,6 +1771,7 @@ button[disabled]:hover {
   text-align: center;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1800,6 +1834,7 @@ button[disabled]:hover {
   margin: var(--adyen-sdk-spacer-060, 12px) 0;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1846,6 +1881,7 @@ button[disabled]:hover {
   list-style-type: decimal;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1863,15 +1899,17 @@ fieldset {
   flex-direction: column;
   gap: 0;
 }
-.adyen-layout-md .adyen-kyc-address__condensed-fields {
-  flex-direction: row;
-  gap: var(--adyen-sdk-spacer-080, 20px);
-}
-.adyen-layout-md .adyen-kyc-address__condensed-fields > *:first-child {
-  flex: 0 0 50%;
-}
-.adyen-layout-md .adyen-kyc-address__condensed-fields > *:not(:first-child) {
-  flex: 1;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-address__condensed-fields {
+    flex-direction: row;
+    gap: var(--adyen-sdk-spacer-080, 20px);
+  }
+  .adyen-kyc-address__condensed-fields > *:first-child {
+    flex: 0 0 50%;
+  }
+  .adyen-kyc-address__condensed-fields > *:not(:first-child) {
+    flex: 1;
+  }
 }
 
 .adyen-kyc-search-address {
@@ -1913,6 +1951,7 @@ fieldset {
   text-align: center;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1926,8 +1965,10 @@ fieldset {
 .adyen-kyc-id-verification {
   min-height: 250px;
 }
-.adyen-layout-xs-only .adyen-kyc-id-verification {
-  height: 380px;
+@container main (max-width: 680px) {
+  .adyen-kyc-id-verification {
+    height: 380px;
+  }
 }
 .adyen-kyc-id-verification .onfido-sdk-ui-Modal-inner {
   border: 0 !important;
@@ -2033,6 +2074,7 @@ fieldset {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2064,6 +2106,7 @@ fieldset {
   flex: 1;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2076,13 +2119,17 @@ fieldset {
   align-items: center;
   margin: var(--adyen-sdk-spacer-120, 48px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
 }
-.adyen-layout-xs-only .adyen-action-bar {
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-040, 8px);
+@container main (max-width: 680px) {
+  .adyen-action-bar {
+    flex-direction: column;
+    gap: var(--adyen-sdk-spacer-040, 8px);
+  }
 }
-.adyen-layout-md .adyen-action-bar {
-  flex-flow: row-reverse;
-  justify-content: space-between;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-action-bar {
+    flex-flow: row-reverse;
+    justify-content: space-between;
+  }
 }
 
 .adyen-action-bar__action {
@@ -2090,8 +2137,10 @@ fieldset {
   align-items: center;
   gap: var(--adyen-sdk-spacer-040, 8px);
 }
-.adyen-layout-xs-only .adyen-action-bar__action {
-  width: 100%;
+@container main (max-width: 680px) {
+  .adyen-action-bar__action {
+    width: 100%;
+  }
 }
 
 .adyen-action-bar__button {
@@ -2138,6 +2187,7 @@ fieldset {
   fill: var(--adyen-sdk-color-label-highlight, #0070f5);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2148,14 +2198,18 @@ fieldset {
   display: flex;
   gap: var(--adyen-sdk-spacer-060, 12px);
 }
-.adyen-layout-xs-only .adyen-kyc-field-verification-methods {
-  flex-direction: column;
+@container main (max-width: 680px) {
+  .adyen-kyc-field-verification-methods {
+    flex-direction: column;
+  }
 }
 .adyen-kyc-field-verification-methods__card {
   display: flex;
 }
-.adyen-layout-md .adyen-kyc-field-verification-methods__card {
-  display: block;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-field-verification-methods__card {
+    display: block;
+  }
 }
 .adyen-kyc-field-verification-methods .adyen-kyc-radio-card {
   width: 100%;
@@ -2164,15 +2218,19 @@ fieldset {
   margin-right: var(--adyen-sdk-spacer-070, 16px);
   width: 20%;
 }
-.adyen-layout-md .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__icon {
-  margin-right: var(--adyen-sdk-spacer-000, 0px);
-  width: auto;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__icon {
+    margin-right: var(--adyen-sdk-spacer-000, 0px);
+    width: auto;
+  }
 }
 .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
   width: 80%;
 }
-.adyen-layout-md .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
-  width: auto;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
+    width: auto;
+  }
 }
 .adyen-kyc-field-verification-methods__footer {
   align-items: center;
@@ -2192,8 +2250,10 @@ fieldset {
 .adyen-kyc-radio-group-card__illustration svg {
   height: 75px;
 }
-.adyen-layout-md .adyen-kyc-radio-group-card__illustration svg {
-  height: 125px;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-radio-group-card__illustration svg {
+    height: 125px;
+  }
 }
 
 .adyen-kyc-instant-verification-error,
@@ -2219,6 +2279,7 @@ fieldset {
   position: absolute;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2428,6 +2489,7 @@ fieldset {
   text-decoration: underline;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2445,9 +2507,11 @@ fieldset {
   display: flex;
   flex-direction: column;
 }
-.adyen-layout-md .adyen-kyc-structured-list-list-item {
-  flex-direction: row;
-  align-items: center;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-structured-list-list-item {
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .adyen-kyc-structured-list-list-item:not(:last-of-type) {
@@ -2466,8 +2530,10 @@ fieldset {
   margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
   overflow-x: auto;
 }
-.adyen-layout-md .adyen-kyc-structured-list-value {
-  margin: var(--adyen-sdk-spacer-000, 0px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-structured-list-value {
+    margin: var(--adyen-sdk-spacer-000, 0px);
+  }
 }.adyen-kyc-basic-information {
   display: flex;
   flex-direction: column;
@@ -2498,6 +2564,7 @@ fieldset {
   text-wrap: nowrap;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2590,6 +2657,7 @@ fieldset {
   color: var(--adyen-sdk-color-label-primary, #00112c);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2599,8 +2667,10 @@ fieldset {
 .adyen-kyc-form-container {
   width: 100%;
 }
-.adyen-layout-md .adyen-kyc-form-container {
-  flex: 1;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-form-container {
+    flex: 1;
+  }
 }
 
 .adyen-kyc-form-wrapper--hidden {
@@ -2611,8 +2681,10 @@ fieldset {
   width: 27%;
 }
 
-.adyen-layout-xs-only .adyen-kyc-dropin__content-main {
-  flex-direction: column;
+@container main (max-width: 680px) {
+  .adyen-kyc-dropin__content-main {
+    flex-direction: column;
+  }
 }.adyen-kyc-expiry-modal__footer {
   display: flex;
   flex-direction: row;
@@ -2744,6 +2816,7 @@ fieldset {
   backdrop-filter: blur(10px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2803,6 +2876,7 @@ fieldset {
   margin: 0 calc(var(--step-progress-internal-height) / 2);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2839,8 +2913,10 @@ fieldset {
   height: calc(100% - 56px);
   overflow: auto;
 }
-.adyen-layout-md .adyen-kyc-dropin__content {
-  height: calc(100% - 72px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-dropin__content {
+    height: calc(100% - 72px);
+  }
 }
 
 /* padding in dropins, not used in modal view */
@@ -2850,11 +2926,15 @@ fieldset {
   padding: var(--adyen-sdk-spacer-070, 16px);
   width: 100%;
 }
-.adyen-layout-md .adyen-kyc-dropin__content-main {
-  padding: var(--adyen-sdk-spacer-090, 24px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-dropin__content-main {
+    padding: var(--adyen-sdk-spacer-090, 24px);
+  }
 }
-.adyen-layout-lg .adyen-kyc-dropin__content-main {
-  padding: var(--adyen-sdk-spacer-110, 40px);
+@container main (min-width: 1024px) {
+  .adyen-kyc-dropin__content-main {
+    padding: var(--adyen-sdk-spacer-110, 40px);
+  }
 }
 
 .adyen-kyc-dropin__main {
@@ -2876,6 +2956,7 @@ fieldset {
   justify-content: end;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2885,27 +2966,33 @@ fieldset {
 .adyen-kyc-form-navigation {
   width: 100%;
 }
-.adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
-  display: none;
-}
-.adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
-  font-size: 0;
-}
-.adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
-  font-size: var(--adyen-sdk-text-title-font-size, 16px);
-  font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
-  line-height: var(--adyen-sdk-text-title-line-height, 26px);
-  padding-left: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-layout-md .adyen-kyc-form-navigation {
-  padding-right: var(--adyen-sdk-spacer-100, 32px);
+@container main (max-width: 680px) {
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
+    display: none;
+  }
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
+    font-size: 0;
+  }
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
+    font-size: var(--adyen-sdk-text-title-font-size, 16px);
+    font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+    font-weight: var(--adyen-sdk-text-title-font-weight, 600);
+    line-height: var(--adyen-sdk-text-title-line-height, 26px);
+    padding-left: var(--adyen-sdk-spacer-000, 0px);
+  }
 }
-.adyen-layout-md .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
-  display: none;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-form-navigation {
+    padding-right: var(--adyen-sdk-spacer-100, 32px);
+  }
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
+    display: none;
+  }
 }
-.adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
-  display: none;
+@container main (max-width: 680px) {
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
+    display: none;
+  }
 }
 .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
   color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
@@ -2933,6 +3020,7 @@ fieldset {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3007,6 +3095,7 @@ fieldset {
   margin-left: auto;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3022,13 +3111,15 @@ fieldset {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.adyen-layout-md .adyen-kyc-decision-makers__container {
-  display: flex;
-  flex-direction: column;
-}
-.adyen-layout-md .adyen-kyc-decision-makers__box {
-  margin-right: var(--adyen-sdk-spacer-090, 24px);
-  width: 33.3%;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-decision-makers__container {
+    display: flex;
+    flex-direction: column;
+  }
+  .adyen-kyc-decision-makers__box {
+    margin-right: var(--adyen-sdk-spacer-090, 24px);
+    width: 33.3%;
+  }
 }
 .adyen-kyc-decision-makers__container {
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
@@ -3073,6 +3164,7 @@ fieldset {
   margin-bottom: var(--adyen-sdk-spacer-020, 4px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3152,6 +3244,7 @@ fieldset {
   padding: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3218,10 +3311,13 @@ fieldset {
   border-top-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
 }
 
-.adyen-layout-xs-only .adyen-kyc-status__text {
-  display: none;
+@container main (max-width: 680px) {
+  .adyen-kyc-status__text {
+    display: none;
+  }
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3250,6 +3346,7 @@ fieldset {
   width: 100%;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3419,6 +3516,7 @@ fieldset {
   width: 92px;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3510,6 +3608,7 @@ fieldset {
   align-items: center;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3532,8 +3631,10 @@ fieldset {
 .adyen-task-item__header {
   flex-wrap: wrap-reverse;
 }
-.adyen-layout-md .adyen-task-item__status {
-  gap: var(--adyen-sdk-spacer-040, 8px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-task-item__status {
+    gap: var(--adyen-sdk-spacer-040, 8px);
+  }
 }
 .adyen-task-item__body {
   display: flex;
@@ -3627,6 +3728,7 @@ fieldset {
   padding-top: 1px;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3644,8 +3746,10 @@ fieldset {
   align-items: flex-start;
   background: var(--adyen-sdk-color-background-primary, #ffffff);
 }
-.adyen-layout-xs-only .adyen-task-list-group {
-  border: 0;
+@container main (max-width: 680px) {
+  .adyen-task-list-group {
+    border: 0;
+  }
 }
 .adyen-task-list-group__header {
   padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-070, 16px);
@@ -3660,6 +3764,7 @@ fieldset {
   margin-top: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3712,6 +3817,7 @@ fieldset {
   margin-top: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3792,6 +3898,7 @@ fieldset {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3821,6 +3928,7 @@ fieldset {
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -4387,9 +4495,19 @@ fieldset {
   position: relative;
   padding: var(--adyen-sdk-spacer-100, 32px);
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  /**
+  * main container query, used similarly to a @media query
+  * considering our Component can be embedded in a container of arbitrary size
+  * that does not necessarily match the whole window/screen size.
+  * Uses s and l breakpoints defined in variables.
+  */
+  container-type: inline-size;
+  container-name: main;
 }
-.adyen-layout-xs-only .adyen-kyc-ui-element-container {
-  padding: var(--adyen-sdk-spacer-040, 8px);
+@container main (max-width: 680px) {
+  .adyen-kyc-ui-element-container {
+    padding: var(--adyen-sdk-spacer-040, 8px);
+  }
 }
 
 /*
@@ -4402,6 +4520,7 @@ fieldset {
   padding: 0;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -4514,14 +4633,19 @@ fieldset {
   transform: translate(-50%, 0);
   z-index: 500;
 }
-.adyen-layout-xs-only .adyen-kyc-dropin__toast-stack {
-  bottom: var(--adyen-sdk-spacer-070, 16px);
-  position: fixed;
+@container main (max-width: 680px) {
+  .adyen-kyc-dropin__toast-stack {
+    bottom: var(--adyen-sdk-spacer-070, 16px);
+    position: fixed;
+  }
 }
-.adyen-layout-md .adyen-kyc-dropin__toast-stack {
-  top: var(--adyen-sdk-spacer-070, 16px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-dropin__toast-stack {
+    top: var(--adyen-sdk-spacer-070, 16px);
+  }
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */