coveragebook_components 0.6.2 → 0.6.3

data/app/assets/build/coco/book.css

@@ -732,18 +732,268 @@ select {
     [data-coco] h6 {
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
+[data-coco].coco-button {
+  display: inline-flex;
+  width: auto;
+  flex: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border-width: 1px;
+  border-color: transparent;
+  background-color: transparent;
+  color: currentColor;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+    width: -moz-min-content;
+    width: min-content;
+}
+[data-coco].coco-button .button-element {
+  display: inline-flex;
+  width: 100%;
+  text-decoration-line: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+[data-coco].coco-button .button-element:focus-visible {
+  outline-width: 0px;
+}
+[data-coco].coco-button .button-inner {
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+      width: -moz-fit-content;
+      width: fit-content;
+}
+[data-coco].coco-button .button-content {
+  position: relative;
+  order: 2;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  line-height: 1;
+}
+[data-coco].coco-button .button-state-content {
+  display: contents;
+}
+[data-coco].coco-button .button-icon {
+  order: 1;
+  display: inline-flex;
+  align-items: center;
+}
+[data-coco].coco-button .button-dropdown {
+  display: contents;
+  border-radius: 0.375rem;
+}
+[data-coco].coco-button .button-toggle {
+  order: 3;
+}
+/* disabled */
+[data-coco].coco-button[data-disabled="true"] .button-element {
+  cursor: not-allowed;
+}
+/* loading */
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+[data-coco].coco-button[data-state="loading"] > .button-element .button-icon {
+  animation: spin 1.5s linear infinite;
+}
+/* Fit */
+[data-coco].coco-button[data-fit="full"] {
+  width: 100%;
+}
+/* Icons */
+[data-coco].coco-button[data-icon-position="end"] > .button-element .button-content {
+  order: 1;
+}
+[data-coco].coco-button[data-icon-position="end"] > .button-element .button-icon {
+  order: 2;
+}
+[data-coco].coco-button[data-icon-position="end"] > .button-element .button-toggle {
+  order: 3;
+}
+[data-coco].coco-button.with-icon[data-collapsed="true"] > .button-element .button-content {
+        display: none;
+      }
+[data-coco][data-component="dropdown"] {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+[data-coco][data-component="dropdown"] .dropdown-trigger {
+  cursor: pointer;
+      width: -moz-fit-content;
+      width: fit-content;
+}
+@supports (aspect-ratio: 1 / 1) {
+
+  [data-coco][data-component="youtube-embed"] {
+    aspect-ratio: 16/9;
+  }
+}
+@supports not (aspect-ratio: 1 / 1) {
+
+  [data-coco][data-component="youtube-embed"]::before {
+    content: "";
+    float: left;
+    padding-top: calc(100% / (16/9));
+  }
+
+  [data-coco][data-component="youtube-embed"]::after {
+    clear: left;
+    content: "";
+    display: block;
+  }
+}
+[data-coco][data-component="youtube-embed"] iframe {
+  height: 100%;
+  width: 100%;
+}
+[data-coco][data-component="icon"] {
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  flex: none;
+  overflow: hidden;
+  color: currentColor;
+}
+[data-coco][data-component="icon"] svg {
+  height: 100%;
+  width: 100%;
+}
+/* Styles */
+[data-coco][data-component="icon"][data-icon]:not([data-style="fill"]):not([data-style="custom"]) svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  color: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+[data-coco][data-component="icon"][data-icon][data-style="fill"] svg {
+  fill: currentColor;
+  color: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+/* Sizes */
+[data-coco][data-component="icon"][data-size="xs"] {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+[data-coco][data-component="icon"][data-size="sm"] {
+  height: 1rem;
+  width: 1rem;
+}
+[data-coco][data-component="icon"][data-size="md"] {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+[data-coco][data-component="icon"][data-size="lg"] {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+[data-coco][data-component="icon"][data-size="xl"] {
+  height: 2.25rem;
+  width: 2.25rem;
+}
+[data-coco][data-component="icon"][data-size="xxl"] {
+  height: 3rem;
+  width: 3rem;
+}
+/* Motion */
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+[data-coco][data-component="icon"][data-spin="true"] svg {
+  animation: spin 1.5s linear infinite;
+}
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+[data-coco][data-component="icon"][data-spin="reverse"] svg {
+  animation: spin 1.5s linear infinite reverse;
+}
+[data-coco][data-component="image"] {
+  display: block;
+  max-width: 100%;
+}
+[data-coco][data-component="image-uploader"] {
+  display: contents;
+}
+[data-coco][data-component="image-uploader"][data-click="true"] {
+  cursor: pointer;
+}
+[data-coco][data-component="image-uploader"] .uploader-input {
+  display: none;
+}
+[data-coco].coco-link {
+  display: inline-flex;
+  align-items: center;
+}
+[data-coco].coco-link[data-icon-position="start"] .link-text {
+  order: 2;
+}
+[data-coco].coco-link[data-icon-position="start"] [data-component="icon"] {
+  order: 1;
+  margin-right: 0.4em;
+}
+[data-coco].coco-link[data-icon-position="end"] .link-text {
+  order: 1;
+  margin-right: 0.4em;
+}
+[data-coco].coco-link[data-icon-position="end"] [data-component="icon"] {
+  order: 2;
+}
+[data-coco][data-component="placeholder"] {
+  border-width: 1px;
+  border-style: dashed;
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  padding: 1rem;
+  text-align: center;
+}
+[data-coco][data-component="placeholder"][data-size="full"] {
+  height: 100%;
+  width: 100%;
+}
+[data-coco][data-component="placeholder"][data-size="full"] .placeholder-inner {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+[data-coco][data-component="placeholder"][data-size="full"] .placeholder-content {
+  margin: auto;
+}
 [data-coco][data-component="book-editable-slide"] {
     /* 
-     * slide-padding-md at max (1480px): 240px (16.2%)
-     * slide-padding-md at min (320px): 16.2% x 320px = 52px
+     * slide-padding-lg at max (1480px): 240px (16.2%)
+     * slide-padding-lg at min (320px): 16.2% x 320px = 52px
      */
-    --slide-padding-lg: max(38px, clamp(52px, 16.2cqw, 240px));
+    --slide-padding-lg: clamp(52px, 16.2cqw, 240px);
 
     /* 
      * slide-padding-md at max (1480px): 120px (8.1%)
      * slide-padding-md at min (320px): 8.1% x 320px = 26px
      */
-    --slide-padding-md: max(24px, clamp(26px, 8.1cqw, 120px));
+    --slide-padding-md: clamp(26px, 8.1cqw, 120px);
 
     /* 
      * slide-padding-sm at max (1480px): 80px (5.4%)
@@ -751,6 +1001,9 @@ select {
      */
     --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
 
+    /* Visually-adjusted small padding size for grid gap and header spacing */
+    --slide-padding-sm-internal: max(20px, clamp(16px, 4.9cqw, 72px));
+
     /* 
      * Small title font size at max (1480px): 64px (4.3%)
      * Small title font size at min (320px): 4.3% x 320px = 13.8px
@@ -764,10 +1017,7 @@ select {
      * Text font size at max (1480px): 24px / 1.62%
      * Text font size at min (320px): 1.62% x 320px = 5.2px
      */
-    --text-font-size: max(
-      16px,
-      clamp(5.2px, 1.62cqw, 24px)
-    );
+    --text-font-size: max(12px, clamp(6.1px, 1.86cqw, 28px));
 
     /* ------------- */
 
@@ -838,11 +1088,23 @@ select {
 @container (min-width: 700px) {
 
   [data-coco][data-component="book-editable-slide"] .slide-container {
-    padding: var(--slide-padding-md);
+    padding-left: var(--slide-padding-md);
+    padding-right: var(--slide-padding-md);
+    padding-top: var(--slide-padding-md);
+    padding-bottom: var(--slide-padding-md);
   }
 }
-[data-coco][data-component="book-editable-slide"] [data-slide-region],
-    [data-coco][data-component="book-editable-slide"] .slide-header,
+[data-coco][data-component="book-editable-slide"] .slide-layout {
+  height: 100%;
+  width: 100%;
+}
+@container (min-width: 700px) {
+
+  [data-coco][data-component="book-editable-slide"] .slide-layout {
+    display: grid;
+  }
+}
+[data-coco][data-component="book-editable-slide"] .slide-header,
     [data-coco][data-component="book-editable-slide"] .slide-text,
     [data-coco][data-component="book-editable-slide"] .slide-media {
   display: none;
@@ -850,7 +1112,11 @@ select {
 [data-coco][data-component="book-editable-slide"] .slide-group {
   display: contents;
 }
+[data-coco][data-component="book-editable-slide"] .slide-header {
+  width: 100%;
+}
 [data-coco][data-component="book-editable-slide"] .slide-title {
+  width: 100%;
   font-weight: 700;
   color: currentColor;
       overflow-wrap: anywhere;
@@ -858,20 +1124,39 @@ select {
       font-size: var(--title-font-size);
 }
 [data-coco][data-component="book-editable-slide"] .slide-text {
+  width: 100%;
+  overflow: hidden;
+  font-size: 1rem;
+  line-height: 1.5rem;
   color: currentColor;
       line-height: 1.5;
-      font-size: var(--text-font-size);
 }
 [data-coco][data-component="book-editable-slide"] .slide-media {
+  position: relative;
   width: 100%;
+  font-size: 1rem;
+  line-height: 1.5rem;
   color: currentColor;
-      font-size: var(--text-font-size);
 }
-[data-coco][data-component="book-editable-slide"] .slide-media img {
+@container (min-width: 700px) {
+      [data-coco][data-component="book-editable-slide"] .slide-text,
+      [data-coco][data-component="book-editable-slide"] .slide-media {
+        font-size: var(--text-font-size);
+      }
+      [data-coco][data-component="book-editable-slide"] .slide-media-wrapper {
+    position: absolute;
+    inset: 0px;
+    height: 100%;
+    width: 100%;
+  }
+    }
+[data-coco][data-component="book-editable-slide"] .slide-media-wrapper img {
   height: 100%;
   width: 100%;
   -o-object-fit: contain;
      object-fit: contain;
+  -o-object-position: center;
+     object-position: center;
 }
 /* layouts */
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] {
@@ -880,7 +1165,7 @@ select {
        * Title font size at min (320px): 5.4% x 320px = 17px
        */
       --title-font-size: max(
-        35px,
+        38px,
         clamp(17px, 5.4cqw, 80px)
       );
 
@@ -889,64 +1174,59 @@ select {
        * Text font size at min (320px): 2.16% x 320px = 7px
        */
       --text-font-size: max(
-        16px,
+        15px,
         clamp(7px, 2.16cqw, 32px)
       );
-      text-align: center;
     }
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-container {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
 @container (min-width: 700px) {
 
   [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-container {
     padding-left: var(--slide-padding-lg);
     padding-right: var(--slide-padding-lg);
+    padding-top: var(--slide-padding-md);
+    padding-bottom: var(--slide-padding-md);
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] [data-slide-region="content-1"] {
-  display: block;
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-layout {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 475px;
 }
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] [data-slide-region="content-1"] .slide-text {
-  display: block;
+@container (min-width: 700px) {
+
+  [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-layout {
+    max-width: 100%;
+  }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"].with-title [data-slide-region="content-1"] .slide-text {
-        margin-top: 0.875em;
-      }
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-layout {
+        grid-template-areas: "content";
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] [data-role="group-primary-text"] {
   display: flex;
   height: 100%;
-  width: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
+        grid-area: content;
 }
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-header {
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] [data-role="header"],
+      [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] [data-role="text-primary"] {
   display: block;
-  width: 100%;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-content {
-  width: 100%;
-  flex: none;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-header,
-      [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-content {
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  max-width: 360px;
-}
-@container (min-width: 700px) {
-
-  [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-header,
-      [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-content {
-    max-width: 100%;
-  }
 }
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
         line-height: 1.4;
       }
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-title"].with-title .slide-text {
+        margin-top: 0.875em;
+      }
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
 }
 @container (min-width: 700px) {
 
@@ -954,51 +1234,42 @@ select {
     padding-top: var(--slide-padding-sm);
     padding-bottom: var(--slide-padding-sm);
   }
-}
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
-  display: flex;
-  align-items: center;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-layout {
-  width: 100%;
-}
-@container (min-width: 700px) {
 
   [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-layout {
-    display: grid;
+    padding-top: 4.8cqw;
+    padding-bottom: 4.8cqw;
   }
 }
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-layout {
-        height: -moz-min-content;
-        height: min-content;
-        grid-template-columns: 1fr;
+        grid-template-areas: "content";
         grid-template-rows: auto;
-        grid-gap: var(--slide-padding-sm);
       }
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"].with-title .slide-container {
-  display: block;
-}
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"].with-title .slide-layout {
-  height: 100%;
-          grid-template-rows: min-content auto;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-header {
+  padding-top: 0px;
+  padding-bottom: 0px;
+        grid-template-areas:
+          "header"
+          "content";
+        grid-template-rows: min-content auto;
+        grid-gap: var(--slide-padding-sm-internal);
+}
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="header"],
+      [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="text-primary"] {
   display: block;
-  width: 100%;
-  margin-bottom: 1.5rem;
 }
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="header"] {
+        grid-area: header;
+        margin-bottom: 1.25rem;
+      }
 @container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-header {
+  [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="header"] {
     margin-bottom: 0px;
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-slide-region="content-1"] {
-  display: block;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-slide-region="content-1"] .slide-text {
-  display: block;
-}
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="text-primary"] {
+        grid-area: content;
+      }
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
   padding: 1.5rem;
 }
@@ -1008,188 +1279,175 @@ select {
     padding: var(--slide-padding-sm);
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout,
-      [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-content {
-  height: 100%;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] [data-slide-region="content-1"] {
-  display: block;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] [data-slide-region="content-1"] .slide-media {
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout {
+        grid-template-areas: "content";
+        grid-template-rows: 100%;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] [data-role="media-primary"] {
   display: block;
   height: 100%;
-  width: 100%;
+        grid-area: content;
 }
-[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] [data-slide-region="content-1"] .slide-media img {
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-media-wrapper {
   height: 100%;
-  width: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-container, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-container {
-  display: flex;
-  align-items: center;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
 }
-@container (min-width: 700px) {
-
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-container, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-container {
-    padding-top: var(--slide-padding-sm);
-    padding-bottom: var(--slide-padding-sm);
-  }
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-layout, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
-  width: 100%;
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-container {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
 }
 @container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-layout, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
-    display: grid;
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-container {
+    padding: var(--slide-padding-md);
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-layout, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
-        height: -moz-min-content;
-        height: min-content;
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-layout {
+        grid-template-areas: "text media";
+        grid-template-rows: 100%;
         grid-template-columns: 1fr 1fr;
-        grid-template-rows: auto;
-        grid-gap: var(--slide-padding-sm);
+        grid-gap: var(--slide-padding-sm-internal);
       }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"].with-title .slide-container, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"].with-title .slide-container {
-  display: block;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"].with-title .slide-layout, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"].with-title .slide-layout {
-  height: 100%;
-          grid-template-rows: min-content auto;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-header, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-header {
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="header"],
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="text-primary"],
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="media-primary"],
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="group-primary-text"] {
   display: block;
-  width: 100%;
-  margin-bottom: 2.5rem;
 }
-@container (min-width: 700px) {
-
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-header, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-header {
-    margin-bottom: 0px;
-  }
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-header, [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-header {
-        grid-column-start: 1;
-        grid-column-end: -1;
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="group-primary-text"] {
+        grid-area: text;
       }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"],
-      [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"],
-      [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"],
-      [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] {
-  display: block;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] {
-  margin-bottom: var(--slide-padding-sm);
-}
-@container (min-width: 700px) {
-
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] {
-    margin-bottom: 0px;
-  }
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-text {
-  display: block;
-}
 @container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="group-primary-text"] {
+    display: flex;
     height: 100%;
+    flex-direction: column;
+    justify-content: center;
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-content {
-  position: relative;
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="media-primary"] {
+  margin-top: 1.5rem;
 }
 @container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-content {
-    display: flex;
-    height: 100%;
-    align-items: center;
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="media-primary"] {
+    margin-top: 0px;
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media {
-  display: block;
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="media-primary"] {
+        grid-area: media;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"].with-title .slide-text {
+        margin-top: 0.875em;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-container {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
 }
 @container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media {
-    position: absolute;
-    inset: 0px;
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-container {
+    padding: var(--slide-padding-sm);
   }
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-layout {
-  height: 100%;
-  width: 100%;
-}
-@container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-layout {
-    display: grid;
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-layout {
+    padding-top: 4.8cqw;
+    padding-bottom: 4.8cqw;
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-layout {
-        grid-template-columns: 1fr 1fr;
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-layout {
+        grid-template-areas: "primary secondary";
         grid-template-rows: auto;
-        grid-gap: var(--slide-padding-sm);
+        grid-template-columns: 1fr 1fr;
+        grid-gap: var(--slide-padding-sm-internal);
       }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-group {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-bottom: var(--slide-padding-sm);
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"].with-title .slide-layout {
+  padding-top: 0px;
+  padding-bottom: 0px;
+        grid-template-areas:
+          "header header"
+          "primary secondary";
+        grid-template-rows: min-content auto;
+}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="header"],
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-primary"],
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-secondary"] {
+  display: block;
+}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="header"] {
+        grid-area: header;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-primary"] {
+        grid-area: primary;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-secondary"] {
+        grid-area: secondary;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-header,
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-primary"] {
+  margin-bottom: 1.5rem;
 }
 @container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-group {
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-header,
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-primary"] {
     margin-bottom: 0px;
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-header {
-  display: block;
-  width: 100%;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-title {
-        margin-bottom: 0.5em;
-      }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-slide-region="content-1"] {
-  display: block;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-slide-region="content-1"] .slide-text {
-  display: block;
-}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-slide-region="content-2"] {
-  position: relative;
-  display: block;
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-container {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
 }
 @container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-slide-region="content-2"] {
-    display: flex;
-    height: 100%;
-    align-items: center;
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-container {
+    padding: var(--slide-padding-sm);
+  }
+
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
+    padding-top: 4.8cqw;
+    padding-bottom: 4.8cqw;
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-slide-region="content-2"] .slide-media {
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
+        grid-template-areas: "primary secondary";
+        grid-template-rows: auto;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: var(--slide-padding-sm-internal);
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"].with-title .slide-layout {
+  padding-top: 0px;
+  padding-bottom: 0px;
+        grid-template-areas:
+          "header header"
+          "primary secondary";
+        grid-template-rows: min-content auto;
+}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="header"],
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-primary"],
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-secondary"] {
   display: block;
 }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="header"] {
+        grid-area: header;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-primary"] {
+        grid-area: primary;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-secondary"] {
+        grid-area: secondary;
+      }
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-header,
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-primary"] {
+  margin-bottom: 1.5rem;
+}
 @container (min-width: 700px) {
 
-  [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-slide-region="content-2"] .slide-media {
-    position: absolute;
-    inset: 0px;
+  [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-header,
+      [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-primary"] {
+    margin-bottom: 0px;
   }
 }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-slide-region="content-2"] .slide-media img {
-  height: 100%;
-  width: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
-}
 [data-coco][data-component="book-media-slide"] img {
   height: 100%;
   width: 100%;
@@ -1242,18 +1500,8 @@ select {
 }
 /* Transparent gray blend-mode background utilities */
 .\!icon {
-  color: currentColor;
-}
-.icon {
-  color: currentColor;
-}
-.\!icon {
-    stroke-linecap: round !important;
-    stroke-linejoin: round !important;
   }
 .icon {
-    stroke-linecap: round;
-    stroke-linejoin: round;
   }
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
 [data-tippy-root]{max-width:calc(100vw - 10px)}