Merge branch 'main' into discussion_1641

libs/blocks/marquee/marquee.css

@@ -8,7 +8,7 @@
   min-height: 560px;
 }
 
-.marquee:is(.small, .inline, .large.compact) {
+.marquee.small, .marquee.quiet, .marquee.inline, .marquee.large.compact {
   min-height: 360px;
 }
 
@@ -17,28 +17,30 @@
   margin-bottom: 0;
 }
 
-.marquee:is(.light, .mobile-light, .quiet, .inline) {
+.marquee.light, .marquee.mobile-light, .marquee.quiet, .marquee.inline {
   color: var(--text-color);
 }
 
-.marquee:is(.mobile-dark, .quiet.dark) {
+.marquee.mobile-dark {
   color: var(--color-white);
 }
 
-.marquee .icon-area :is(picture, a) {
+.marquee .icon-area picture,
+.marquee .icon-area a {
   display: contents;
 }
 
-.marquee:is(.mobile-dark, .quiet.dark) a:is(:not(.con-button), :not(.con-button):hover) {
-  color: var(--link-color-dark);
-}
-
 .marquee.mobile-light a:not(.con-button) {
   color: var(--link-color);
 }
 
-.marquee.static-links a:not(.con-button),
-.static-links .marquee a:not(.con-button),
+.marquee.mobile-dark a:not(.con-button),
+.marquee.mobile-dark a:not(.con-button):hover {
+  color: var(--link-color-dark);
+}
+
+.marquee.static-links:not(.mobile-dark) a:not(.con-button),
+.static-links .marquee:not(.mobile-dark) a:not(.con-button),
 .marquee.static-links a:not(.con-button):hover,
 .static-links .marquee a:not(.con-button):hover {
   color: inherit;
@@ -93,7 +95,8 @@
   margin: 0 auto;
 }
 
-.marquee .media :is(img, video) {
+.marquee .media img,
+.marquee .media video {
   display: block;
   width: 100%;
   height: auto;
@@ -125,11 +128,8 @@
   left: 0;
 }
 
-.marquee:is(.center, .centered) :is(.foreground, .action-area) {
-  justify-content: center;
-}
-
-.marquee .background :is(.tablet-only, .desktop-only) {
+.marquee .background .tablet-only,
+.marquee .background .desktop-only {
   display: none;
 }
 
@@ -173,6 +173,10 @@
   display: block;
 }
 
+.marquee:is(.center, .centered) .icon-area img {
+  margin: 0 auto;
+}
+
 .marquee.large .icon-area img {
   height: 64px;
 }
@@ -204,14 +208,24 @@
   padding: 0;
 }
 
-.marquee .text :is(.detail-l, .heading-xl, .heading-xxl) {
+.marquee .text .detail-l,
+.marquee .text .heading-xl,
+.marquee .text .heading-xxl {
   margin-bottom: var(--spacing-xs);
 }
 
-.marquee:is(.center, .centered) {
+.marquee.center,
+.marquee.centered {
   text-align: center;
 }
 
+.marquee.center .foreground,
+.marquee.center .action-area,
+.marquee.centered .foreground,
+.marquee.centered .action-area {
+  justify-content: center;
+}
+
 /* Split */
 .marquee.split {
   flex-direction: column;
@@ -223,14 +237,16 @@
   margin: 0;
 }
 
-.marquee.split .media :is(img, video) {
+.marquee.split .media img,
+.marquee.split .media video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   max-height: 360px;
 }
 
-.marquee:is(.split, .small.split) .foreground {
+.marquee.split .foreground,
+.marquee.small.split .foreground {
   padding: var(--spacing-m) 0;
 }
 
@@ -318,11 +334,8 @@
     gap: var(--spacing-s);
   }
 
-  .marquee:is(.split, .split.small, .split.large) .media :is(img, video) {
-    max-height: initial;
-  }
-
-  .marquee .background :is(.mobile-only, .desktop-only) {
+  .marquee .background .mobile-only,
+  .marquee .background .desktop-only {
     display: none;
   }
 
@@ -345,12 +358,30 @@
   .marquee.tablet-dark {
     color: var(--color-white);
   }
+
+  .marquee.split.large .text {
+    margin: 0;
+  }
+
+  .marquee.quiet .foreground .text {
+    max-width: 600px;
+  }
+
+  .marquee.center .foreground .text,
+  .marquee.centered .foreground .text {
+    margin: 0 auto;
+  }
+
+  .marquee.quiet.large .foreground .text {
+    max-width: 800px;
+  }
 
   .marquee.tablet-light a:not(.con-button) {
     color: var(--link-color);
   }
 
-  .marquee.tablet-dark a:is(:not(.con-button), :not(.con-button):hover) {
+  .marquee.tablet-dark a:not(.con-button),
+  .marquee.tablet-dark a:not(.con-button):hover {
     color: var(--link-color-dark);
   }
 
@@ -381,7 +412,7 @@
     text-decoration: none;
   }
 
-.marquee .media {
+  .marquee .media {
     width: var(--grid-container-width); /* 10 grid / 83% */
   }
 
@@ -396,22 +427,6 @@
     flex-direction: row;
     padding: var(--spacing-xl) 0;
   }
-
-  .marquee:is(.center, .centered) .foreground .text {
-    margin: 0 auto;
-  }
-
-  .marquee.split.large .text {
-    margin: 0;
-  }
-
-  .marquee.quiet .foreground .text {
-    max-width: 600px;
-  }
-
-  .marquee.quiet.large .foreground .text {
-    max-width: 800px;
-  }
 
   .marquee.split .foreground.container .text {
     max-width: calc(50% - var(--grid-column-width));
@@ -452,8 +467,18 @@
   .marquee.split.row-reversed .foreground.container {
     justify-content: flex-end;
   }
+
+  .marquee.split .media img,
+  .marquee.split.small .media img,
+  .marquee.split.large .media img,
+  .marquee.split .media video,
+  .marquee.split.small .media video,
+  .marquee.split.large .media video{
+    max-height: initial;
+  }
 
-  .marquee.split .media.bleed :is(picture, video) {
+  .marquee.split .media.bleed picture,
+  .marquee.split .media.bleed video {
     height: 100%;
     object-fit: fill;
   }
@@ -478,13 +503,8 @@
     min-height: 360px;
   }
 
-  .marquee .media :is(img, video) {
-    width: 100%;
-    max-width: initial;
-    min-height: 150px;
-  }
-
-  .marquee .background :is(.mobile-only, .tablet-only) {
+  .marquee .background .mobile-only,
+  .marquee .background .tablet-only {
     display: none;
   }
 
@@ -507,8 +527,9 @@
   .marquee.desktop-light a:not(.con-button) {
     color: var(--link-color);
   }
-
-  .marquee.desktop-dark a:is(:not(.con-button), :not(.con-button):hover) {
+
+  .marquee.desktop-dark a:not(.con-button),
+  .marquee.desktop-dark a:not(.con-button):hover {
     color: var(--link-color-dark);
   }
 
@@ -550,11 +571,30 @@
     gap: 100px; /* 1 column */
   }
 
-  :is(.marquee, .marquee.small, .marquee.large) .text {
+  .marquee.small .foreground,
+  .marquee.split .foreground.container {
+    padding: 0;
+  }
+
+  .marquee.quiet .foreground,
+  .marquee.inline .foreground,
+  .marquee.split .foreground {
+    justify-content: initial;
+  }
+
+  html[dir="rtl"] .marquee .foreground {
+    flex-direction: row-reverse;
+  }
+
+  .marquee .text,
+  .marquee.small .text,
+  .marquee.large .text {
     order: unset;
   }
 
-  :is(.marquee, .marquee.small, .marquee.large) .media {
+  .marquee .media,
+  .marquee.small .media,
+  .marquee.large .media {
     order: unset;
   }
 
@@ -566,17 +606,18 @@
     max-width: 600px;
   }
 
-  .marquee.small .foreground,
-  .marquee.split .foreground.container {
-    padding: 0;
-  }
-
-  .marquee:is(.quiet, .inline, .split) .foreground {
-    justify-content: initial;
+  .marquee.quiet.center .foreground,
+  .marquee.inline.center .foreground,
+  .marquee.quiet.centered .foreground,
+  .marquee.inline.centered .foreground {
+    justify-content: center;
   }
 
-  .marquee:is(.quiet, .inline):is(.center, .centered) .foreground {
-    justify-content: center;
+  .marquee .media img,
+  .marquee .media video {
+    width: 100%;
+    max-width: initial;
+    min-height: 150px;
   }
 
   .marquee.small .text {
@@ -653,7 +694,8 @@
     right: auto;
   }
 
-  .marquee.split:is(.one-third, .one-third.large) .foreground.container .text {
+  .marquee.split.one-third .foreground.container .text,
+  .marquee.split.one-third.large .foreground.container .text {
     max-width: calc(33.3334% - var(--grid-column-width));
   }
 

libs/blocks/marquee/marquee.js

@@ -65,7 +65,8 @@ const decorateImage = (media) => {
 };
 
 export default function init(el) {
-  if (!['light', 'quiet'].some((s) => el.classList.contains(s))) el.classList.add('dark');
+  const isLight = el.classList.contains('light');
+  if (!isLight) el.classList.add('dark');
   const children = el.querySelectorAll(':scope > div');
   const foreground = children[children.length - 1];
   if (children.length > 1) {

libs/blocks/quiz-results/quiz-results.css

@@ -20,7 +20,7 @@
   justify-content: center;
   width: 100%;
   max-width: 100%;
-  grid-template-columns: repeat(auto-fit,minmax(300px,max-content));
+  grid-template-columns: repeat(auto-fit,300px);
   gap: 32px;
   padding-bottom: 32px;
 }

libs/blocks/quiz/quiz.css

@@ -68,6 +68,7 @@
   border-radius: 0.5rem;
   cursor: pointer;
   display: flex;
+  font-family: inherit;
   margin: 0 0 16px;
   padding: 0;
   user-select: none;
@@ -180,6 +181,7 @@ html[dir="rtl"] .quiz-option-icon {
   border: 2px solid var(--color-white);
   border-radius: 30px;
   cursor: pointer;
+  font-family: inherit;
   font-size: 14px;
   font-weight: 700;
   min-height: 32px;

libs/styles/styles.css

@@ -132,8 +132,11 @@
   --font-size-multiplier: 1.25;
 }
 
-:root:lang(ko-KR) {
+:root:lang(ko-KR),
+:root:lang(ko) {
   --body-font-family: adobe-clean-han-korean, 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif;
+
+  word-break: keep-all;
 }
 
 :root:lang(ja-JP),