@chinggis.systems/collection-ui 1.0.3 → 1.0.5

package/dist/styles.css

@@ -1,5 +1,6 @@
 @import "swiper/css";
 @import "swiper/css/navigation";
+@import "swiper/css/pagination";
 
 .collection-ui {
   --collection-ui-bg: transparent;
@@ -209,7 +210,8 @@
 }
 
 .collection-ui-new-layout-carousel {
-  margin-top: 28px;
+  margin-top: 24px;
+  padding-bottom: 20px;
 }
 
 .collection-ui-grid-double__track,
@@ -219,6 +221,10 @@
   padding: 0 16px 28px;
 }
 
+.collection-ui-grid-double__track {
+  height: 328px;
+}
+
 .collection-ui-grid-double__slide,
 .collection-ui-grid-special__slide {
   height: auto;
@@ -226,19 +232,31 @@
   width: max-content !important;
 }
 
+.collection-ui-grid-double__track .swiper-wrapper {
+  overflow-y: hidden;
+}
+
 .collection-ui-grid-double__panel {
   display: grid;
-  gap: 12px 8px;
+  gap: 14px 16px;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
   grid-template-rows: repeat(2, minmax(0, auto));
+  padding-block: 6px 16px;
 }
 
 .collection-ui-grid-double__item,
 .collection-ui-grid-special__item {
+  display: flex;
+  justify-content: center;
+  justify-self: center;
   min-width: 0;
 }
 
+.collection-ui-grid-double__mobile-scroll {
+  display: none;
+}
+
 .collection-ui-grid-special__panel {
   align-items: stretch;
   display: flex;
@@ -357,12 +375,14 @@
 
 .collection-ui-grid__items {
   display: grid;
-  gap: 32px 16px;
+  gap: 36px 20px;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   padding-top: 16px;
 }
 
 .collection-ui-grid__item {
+  display: flex;
+  justify-content: center;
   min-width: 0;
 }
 
@@ -371,8 +391,42 @@
   width: 100%;
 }
 
-.collection-ui-grid__item .collection-ui-card__media,
 .collection-ui-grid__view-all {
+  align-self: start;
+  height: 180px;
+  justify-self: center;
+  max-width: 190px;
+  min-height: 0;
+  padding: 16px;
+}
+
+.collection-ui-grid__view-all .collection-ui-view-all__icon {
+  font-size: 1.25rem;
+  height: 44px;
+  margin-bottom: 10px;
+  width: 44px;
+}
+
+.collection-ui-grid__item .we-lockup {
+  max-width: min(100%, 190px);
+  width: 190px;
+}
+
+.collection-ui-grid__item .collection-ui-book-media {
+  margin-inline: auto;
+  max-width: 100%;
+}
+
+.collection-detail-page
+  .collection-ui-grid__item
+  .collection-ui-book-media
+  img {
+  height: var(--spine-height, 266px) !important;
+  object-fit: contain;
+  width: auto !important;
+}
+
+.collection-ui-grid__item .collection-ui-card__media {
   min-height: 168px;
 }
 
@@ -427,6 +481,10 @@
   width: 112px;
 }
 
+.collection-ui-card:has(.collection-ui-book-media) {
+  width: max-content;
+}
+
 .collection-ui-card--image-only {
   justify-content: flex-end;
   width: 88px;
@@ -441,15 +499,48 @@
   min-height: 0;
 }
 
-.collection-ui-card--image-only .we-book-overlay {
+.collection-ui-card--image-only .collection-ui-book-media {
   margin-bottom: 0;
 }
 
-.collection-ui-grid-double .we-book-overlay,
-.collection-ui-grid-special .we-book-overlay {
+.collection-ui-grid-double .collection-ui-book-media,
+.collection-ui-grid-special .collection-ui-book-media {
   margin-bottom: 0;
 }
 
+.collection-ui-grid-double .collection-ui-book-media {
+  height: var(--spine-height, 132px) !important;
+  overflow: hidden;
+  width: 88px;
+}
+
+.collection-ui-grid-double .collection-ui-book-media img {
+  height: var(--spine-height, 132px);
+  max-height: none;
+  max-width: none;
+  object-fit: contain;
+  object-position: center;
+  width: auto;
+}
+
+.collection-ui-grid-double .collection-ui-product-media,
+.collection-ui-grid-double .collection-ui-audio-media {
+  background: #fff;
+  border-radius: 6px;
+  height: 96px !important;
+  overflow: hidden;
+  width: 96px !important;
+}
+
+.collection-ui-grid-double .collection-ui-product-media img,
+.collection-ui-grid-double .collection-ui-audio-media img {
+  height: 100% !important;
+  max-height: none;
+  max-width: none;
+  object-fit: contain;
+  width: 100% !important;
+}
+
 .collection-ui-card--featured {
   width: auto;
 }
@@ -505,126 +596,121 @@
 }
 
 .collection-ui-book-media {
+  --book-board-edge: clamp(2px, calc(var(--spine-height, 132px) * 0.01), 4px);
+  --book-hinge-start: clamp(
+    5px,
+    calc(var(--spine-height, 132px) * 0.032),
+    10px
+  );
+  --book-hinge-end: clamp(10px, calc(var(--spine-height, 132px) * 0.06), 18px);
+  --book-cast-shadow-y: clamp(
+    7px,
+    calc(var(--spine-height, 132px) * 0.06),
+    18px
+  );
+  --book-cast-shadow-blur: clamp(
+    18px,
+    calc(var(--spine-height, 132px) * 0.14),
+    36px
+  );
+  --book-cast-shadow-alpha: 18%;
+  --book-cover-shadow-y: clamp(
+    2px,
+    calc(var(--spine-height, 132px) * 0.018),
+    5px
+  );
+  --book-cover-shadow-blur: clamp(
+    4px,
+    calc(var(--spine-height, 132px) * 0.04),
+    9px
+  );
   align-items: center;
-  display: flex;
-  justify-content: center;
-  overflow: visible;
-}
-
-.collection-ui-book-media__artwork {
-  display: block;
+  display: inline-flex;
   flex: 0 0 auto;
+  justify-content: center;
+  max-width: none;
   overflow: visible;
   position: relative;
-  z-index: 1;
+  transform: translateZ(0);
+  width: fit-content;
+  z-index: 0;
 }
 
-.collection-ui-book-media__artwork::before {
-  background-image: url("./assets/spine/FlatShadow.webp");
-  background-size: 100% 100%;
+.collection-ui-book-media::before {
+  background:
+    linear-gradient(
+      90deg,
+      rgb(255 255 255 / 44%) 0,
+      rgb(255 255 255 / 28%) var(--book-board-edge),
+      rgb(0 0 0 / 12%) var(--book-hinge-start),
+      rgb(255 255 255 / 30%) calc(var(--book-hinge-start) + 1px),
+      rgb(0 0 0 / 8%) var(--book-hinge-end),
+      transparent calc(var(--book-hinge-end) + 9px)
+    ),
+    linear-gradient(
+      90deg,
+      transparent calc(100% - 5px),
+      rgb(255 255 255 / 14%) calc(100% - 3px),
+      rgb(0 0 0 / 16%) 100%
+    ),
+    linear-gradient(
+      180deg,
+      rgb(255 255 255 / 12%) 0,
+      transparent 10%,
+      transparent 88%,
+      rgb(0 0 0 / 12%) 100%
+    );
+  border-radius: 4px 5px 5px 4px;
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 14%),
+    inset 2px 0 2px rgb(255 255 255 / 30%),
+    inset -2px 0 2px rgb(0 0 0 / 10%);
   content: "";
-  display: block;
-  height: 115%;
-  left: -10%;
-  opacity: 0.6;
-  position: absolute;
-  top: -4%;
-  width: 120%;
-  z-index: 1;
-}
-
-.collection-ui-book-media__lighting {
   inset: 0;
-  position: relative;
-  z-index: 2;
-}
-
-.collection-ui-book-media__background {
-  filter: blur(8px);
-  inset: 0;
-  left: 50%;
-  margin: 0;
-  opacity: 0.25;
+  opacity: 0.78;
+  pointer-events: none;
   position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-}
-
-@supports (mix-blend-mode: multiply) {
-  .collection-ui-book-media__background {
-    mix-blend-mode: multiply;
-  }
-}
-
-@supports (mix-blend-mode: multiply) {
-  .collection-ui-book-media__lighting::after {
-    background-image: url("./assets/spine/BurnBlend.png");
-    background-size: 100% 100%;
-    border-radius: 2.5px;
-    content: "";
-    display: block;
-    height: 100%;
-    inset: 0;
-    mix-blend-mode: multiply;
-    position: absolute;
-    z-index: 1;
-  }
-}
-
-.collection-ui-book-media__foreground {
-  inset: 0;
-  position: relative;
   z-index: 2;
 }
 
-.collection-ui-book-media__foreground::before {
-  background-image: url("./assets/spine/NormalBlend.webp");
-  background-size: 100% 100%;
-  border-radius: 2.5px;
+.collection-ui-book-media::after {
+  background: radial-gradient(
+    ellipse at center,
+    rgb(0 0 0 / var(--book-cast-shadow-alpha)) 0,
+    transparent 72%
+  );
+  border-radius: 50%;
+  bottom: calc(var(--book-cast-shadow-y) * -0.55);
+  box-shadow: 0 var(--book-cast-shadow-y) var(--book-cast-shadow-blur)
+    rgb(0 0 0 / 10%);
   content: "";
-  display: block;
-  height: 100%;
-  inset: 0;
+  filter: blur(clamp(2px, calc(var(--spine-height, 132px) * 0.018), 5px));
+  left: -4%;
   position: absolute;
-  z-index: 1;
-}
-
-@supports (mix-blend-mode: soft-light) {
-  .collection-ui-book-media__foreground::after {
-    background-color: transparent;
-    background-image: url("./assets/spine/SoftLightBlend.webp");
-    background-size: 100% 100%;
-    border-radius: 2.5px;
-    content: "";
-    display: block;
-    height: 100%;
-    inset: 0;
-    mix-blend-mode: soft-light;
-    position: absolute;
-    z-index: 1;
-  }
-}
-
-.collection-ui-book-media__background img,
-.collection-ui-book-media__foreground img {
-  border-radius: 2.5px;
-  display: block;
-  object-fit: cover;
-  position: relative;
+  right: -4%;
+  top: 82%;
+  transform: scaleY(0.34);
   z-index: 0;
 }
 
-.collection-ui-book-media__artwork::after {
-  background-image: url("./assets/spine/FlatEdges.webp");
-  background-size: 100% 100%;
-  border-radius: 2.5px;
-  content: "";
+.collection-ui-book-media img {
+  border-radius: 4px 5px 5px 4px;
+  box-shadow:
+    1px 0 0 rgb(255 255 255 / 20%),
+    -1px 0 0 rgb(0 0 0 / 22%),
+    0 0 0 1px rgb(0 0 0 / 10%),
+    0 1px 2px rgb(255 255 255 / 14%),
+    0 var(--book-cover-shadow-y) var(--book-cover-shadow-blur) rgb(0 0 0 / 20%),
+    4px 5px 12px rgb(0 0 0 / 12%);
   display: block;
-  height: 100%;
-  inset: 0;
-  position: absolute;
-  z-index: 3;
+  /* filter: brightness(1) contrast(1) saturate(1); */
+  height: var(--spine-height, 100%);
+  max-height: 100%;
+  max-width: none;
+  object-fit: contain;
+  position: relative;
+  width: auto;
+  z-index: 1;
 }
 
 .collection-ui-audio-media,
@@ -717,16 +803,36 @@
   align-items: center;
   background: var(--collection-ui-special-panel);
   display: grid;
-  gap: 24px;
+  gap: clamp(24px, 2vw, 40px);
   justify-items: center;
+  min-height: clamp(320px, 21vw, 390px);
+  overflow: visible;
   padding: 0;
   width: 100%;
 }
 
 .collection-ui-special-item__media {
+  align-items: center;
+  aspect-ratio: 0.72;
   display: flex;
+  height: clamp(282px, 22vw, 354px);
   justify-content: center;
-  transform: scale(1.08);
+  max-width: 100%;
+  min-width: 0;
+  overflow: visible;
+  transform: translateY(clamp(-34px, -2vw, -18px));
+  width: clamp(216px, 20vw, 318px);
+}
+
+.collection-ui-special-item__media > *,
+.collection-ui-special-item__media img,
+.collection-ui-special-item__media .collection-ui-book-media {
+  max-height: calc(100% + 44px);
+  max-width: 100%;
+}
+
+.collection-ui-special-item__media .collection-ui-book-media {
+  margin-bottom: 0;
 }
 
 .collection-ui--preview .collection-ui-special-section,
@@ -755,6 +861,7 @@
 .collection-ui-special-item__description {
   color: var(--collection-ui-muted);
   font-size: 1rem;
+  line-height: 1.55;
   max-width: 560px;
 }
 
@@ -767,12 +874,18 @@
 }
 
 .collection-ui-special-item__button {
+  border-radius: 8px;
   margin-top: 0;
+  min-height: 40px;
+  padding: 0 18px;
 }
 
 .collection-ui-band {
   background: var(--collection-ui-band-bg);
-  padding-block: 32px;
+}
+
+.collection-ui-band--special {
+  padding-block: 0;
 }
 
 .collection-ui--ecommerce .collection-ui-band {
@@ -804,6 +917,40 @@
   min-width: 0;
 }
 
+.collection-ui-banner-carousel,
+.collection-ui-slide__track {
+  padding-bottom: 28px;
+}
+
+.collection-ui-banner-carousel .swiper-pagination,
+.collection-ui-slide__track .swiper-pagination {
+  bottom: 4px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.collection-ui-banner-carousel .swiper-pagination-bullet,
+.collection-ui-slide__track .swiper-pagination-bullet {
+  background: rgb(255 255 255 / 70%);
+  border-radius: 999px;
+  height: 6px;
+  margin: 0 !important;
+  opacity: 1;
+  transition:
+    background-color 220ms ease,
+    transform 220ms ease,
+    width 220ms ease;
+  width: 6px;
+}
+
+.collection-ui-banner-carousel .swiper-pagination-bullet-active,
+.collection-ui-slide__track .swiper-pagination-bullet-active {
+  background: var(--collection-ui-link);
+  transform: scale(1.05);
+  width: 22px;
+}
+
 .collection-ui-banner-carousel__slide {
   height: 100%;
 }
@@ -852,6 +999,16 @@
   height: auto;
 }
 
+.collection-ui-featured-card__media {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+.collection-ui-featured-card__image-background {
+  display: none;
+}
+
 .collection-ui-banner__media-link {
   aspect-ratio: 16 / 9;
   border-radius: 8px;
@@ -876,15 +1033,15 @@
 
 .collection-ui-banner-source {
   align-items: center;
-  aspect-ratio: 16 / 9;
   background: #030712;
   border-radius: 8px;
   display: flex;
+  height: 100%;
   justify-content: center;
-  max-height: 260px;
   overflow: hidden;
   padding: 32px;
   position: relative;
+  width: 100%;
 }
 
 .collection-ui-banner-source__background {
@@ -972,11 +1129,197 @@
   display: none;
 }
 
+.collection-ui-slide {
+  overflow: hidden;
+  width: 100%;
+}
+
+.collection-ui-slide__track {
+  overflow: visible;
+  width: 100%;
+}
+
+.collection-ui-slide__slide {
+  opacity: 0.58;
+  transform: scale(0.965);
+  transition:
+    opacity 450ms ease,
+    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
+  width: min(90dvw, calc(100% - 128px), 1504px);
+}
+
+.collection-ui-slide__slide.swiper-slide-active {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.collection-ui-slide__slide,
+.collection-ui-slide__item,
+.collection-ui-slide .collection-ui-featured-card {
+  height: 100%;
+}
+
+.collection-ui-slide .collection-ui-featured-card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.collection-ui-slide .collection-ui-featured-card__media {
+  align-items: center;
+  aspect-ratio: 15 / 4;
+  background: #030712;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.collection-ui-slide .collection-ui-featured-card__media::after {
+  background:
+    linear-gradient(90deg, rgb(0 0 0 / 62%), rgb(0 0 0 / 20%) 48%, transparent),
+    linear-gradient(0deg, rgb(0 0 0 / 56%), transparent 48%);
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.collection-ui-slide .collection-ui-featured-card__image-background {
+  display: block;
+  filter: blur(24px);
+  height: 100%;
+  inset: 0;
+  object-fit: cover;
+  opacity: 0.72;
+  position: absolute;
+  transform: scale(1.08);
+  width: 100%;
+}
+
+.collection-ui-slide .collection-ui-featured-card__image {
+  filter: drop-shadow(0 16px 30px rgb(0 0 0 / 28%));
+  height: 100% !important;
+  object-fit: contain;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.collection-ui-slide .collection-ui-featured-card__body {
+  bottom: clamp(18px, 3.5vw, 48px);
+  color: #fff;
+  left: clamp(18px, 4vw, 64px);
+  max-width: min(560px, 58%);
+  padding: 0;
+  position: absolute;
+  text-shadow: 0 2px 14px rgb(0 0 0 / 36%);
+  transform: translateY(10px);
+  transition:
+    opacity 450ms ease,
+    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: 3;
+}
+
+.collection-ui-slide__slide:not(.swiper-slide-active)
+  .collection-ui-featured-card__body {
+  opacity: 0;
+  transform: translateY(22px);
+}
+
+.collection-ui-slide .collection-ui-featured-card__title {
+  font-size: clamp(1.25rem, 2.4vw, 2.5rem);
+  font-weight: 600;
+  line-height: 1.15;
+  margin-bottom: 12px;
+}
+
+.collection-ui-slide .collection-ui-featured-card__description {
+  display: -webkit-box;
+  font-size: clamp(0.8125rem, 1vw, 1rem);
+  line-height: 1.5;
+  margin-bottom: 16px;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.collection-ui-slide .collection-ui-featured-card__link {
+  align-items: center;
+  background: rgb(255 255 255 / 90%);
+  border-radius: 999px;
+  color: #111827;
+  display: inline-flex;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  min-height: 36px;
+  padding: 0 16px;
+  text-shadow: none;
+}
+
+.collection-ui-slide__autoplay-progress {
+  align-items: center;
+  background: rgb(0 0 0 / 28%);
+  border-radius: 999px;
+  bottom: 20px;
+  display: flex;
+  height: 46px;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  right: 20px;
+  width: 46px;
+  z-index: 4;
+}
+
+.collection-ui-slide__autoplay-progress svg {
+  height: 100%;
+  transform: rotate(-90deg);
+  width: 100%;
+}
+
+.collection-ui-slide__autoplay-track,
+.collection-ui-slide__autoplay-value {
+  fill: none;
+  stroke-linecap: round;
+  stroke-width: 4;
+}
+
+.collection-ui-slide__autoplay-track {
+  stroke: rgb(255 255 255 / 32%);
+}
+
+.collection-ui-slide__autoplay-value {
+  stroke: #fff;
+  transition: stroke-dashoffset 80ms linear;
+}
+
+.collection-ui-slide__autoplay-progress span {
+  color: #fff;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  left: 50%;
+  line-height: 1;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .collection-ui-featured {
   display: grid;
   gap: 24px;
 }
 
+.collection-ui-banner-grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(
+    var(--collection-ui-columns, 1),
+    minmax(0, 1fr)
+  );
+}
+
 .collection-ui-featured-card__body {
   padding: 16px 0 0;
 }
@@ -1092,21 +1435,406 @@
 }
 
 @media (max-width: 767px) {
+  .collection-ui-container,
+  .collection-ui-container--wide {
+    padding-inline: 16px;
+  }
+
+  .collection-ui-title {
+    margin-bottom: 8px;
+  }
+
+  .collection-ui-title__row {
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .collection-ui-title__heading {
+    font-size: 1rem;
+    min-width: 0;
+  }
+
+  .collection-ui-title__description {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  .collection-ui-new-layout-carousel {
+    margin-top: 12px;
+    padding-bottom: 12px;
+  }
+
+  .collection-ui-grid-double__track,
+  .collection-ui-grid-special__track {
+    overscroll-behavior-y: none;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding-bottom: 14px;
+    scrollbar-width: none;
+    touch-action: pan-x;
+  }
+
+  .collection-ui-grid-special__track {
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+
+  .collection-ui-grid-double__track::-webkit-scrollbar,
+  .collection-ui-grid-special__track::-webkit-scrollbar {
+    display: none;
+  }
+
+  .collection-ui-grid-special__track .swiper-wrapper,
+  .collection-ui-grid-special__slide {
+    scrollbar-width: none;
+  }
+
+  .collection-ui-grid-special__track .swiper-wrapper::-webkit-scrollbar,
+  .collection-ui-grid-special__slide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .collection-ui-grid-special__track .swiper-wrapper,
+  .collection-ui-grid-special__slide {
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+
+  .collection-ui-grid-special,
+  .collection-ui-grid-special * {
+    scrollbar-width: none;
+  }
+
+  .collection-ui-grid-special *::-webkit-scrollbar {
+    display: none;
+    height: 0;
+    width: 0;
+  }
+
+  .collection-ui-grid-double .collection-ui-new-layout-carousel {
+    display: none;
+  }
+
+  .collection-ui-grid-double__mobile-scroll {
+    display: grid;
+    gap: 12px 10px;
+    grid-auto-columns: 96px;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(2, minmax(0, auto));
+    margin-inline: -16px;
+    overscroll-behavior-y: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 12px 16px 16px;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    touch-action: pan-x;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .collection-ui-grid-double__mobile-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  .collection-ui-grid-double__mobile-item {
+    display: flex;
+    justify-content: center;
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+
+  .collection-ui-grid-double__panel {
+    gap: 12px 10px;
+    grid-auto-columns: minmax(96px, 96px);
+  }
+
+  .collection-ui-grid-double .collection-ui-card--image-only {
+    height: 96px;
+    width: 96px;
+  }
+
+  .collection-ui-grid-double__item .collection-ui-book-media img,
+  .collection-ui-grid-double__mobile-item .collection-ui-book-media img {
+    height: var(--spine-height, 132px) !important;
+    max-height: none;
+    max-width: none;
+    width: auto !important;
+  }
+
+  .collection-ui-slide__slide {
+    width: min(90dvw, calc(100% - 32px));
+  }
+
+  .collection-ui-slide .collection-ui-featured-card__media {
+    aspect-ratio: 16 / 7;
+  }
+
+  .collection-ui-slide .collection-ui-featured-card__body {
+    bottom: 16px;
+    left: 16px;
+    max-width: calc(100% - 32px);
+  }
+
+  .collection-ui-slide .collection-ui-featured-card__description {
+    display: none;
+  }
+
+  .collection-ui-slide .collection-ui-featured-card__link {
+    min-height: 32px;
+    padding: 0 12px;
+  }
+
+  .collection-ui-slide__autoplay-progress {
+    bottom: 12px;
+    height: 36px;
+    right: 12px;
+    width: 36px;
+  }
+
   .collection-ui-grid-special__panel {
-    gap: 18px;
-    grid-template-columns: minmax(116px, auto) minmax(104px, auto);
+    --collection-ui-grid-special-featured-width: clamp(136px, 38dvw, 156px);
+    --collection-ui-grid-special-featured-height: clamp(204px, 57dvw, 234px);
+    --collection-ui-grid-special-item-width: clamp(68px, 18dvw, 76px);
+    --collection-ui-grid-special-item-height: clamp(100px, 28dvw, 112px);
+    align-items: end;
+    display: grid;
+    gap: 12px;
+    grid-template-columns:
+      var(--collection-ui-grid-special-featured-width)
+      minmax(0, 1fr);
+    overflow: hidden;
+    width: clamp(300px, calc(100dvw - 72px), 340px);
+  }
+
+  .collection-ui-grid-special__featured {
+    align-items: center;
+    align-self: stretch;
+    min-height: var(--collection-ui-grid-special-featured-height);
+    overflow: hidden;
   }
 
   .collection-ui-grid-special__items {
-    grid-template-columns: minmax(104px, auto);
+    align-items: end;
+    gap: 10px 8px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .collection-ui-grid-special__item {
+    align-items: end;
+    display: flex;
+    height: var(--collection-ui-grid-special-item-height);
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .collection-ui-grid-special__featured .collection-ui-book-media {
+    --spine-height: var(
+      --collection-ui-grid-special-featured-height
+    ) !important;
+    --spine-width: var(--collection-ui-grid-special-featured-width) !important;
+  }
+
+  .collection-ui-grid-special__item .collection-ui-book-media {
+    --spine-height: var(--collection-ui-grid-special-item-height) !important;
+    --spine-width: var(--collection-ui-grid-special-item-width) !important;
+  }
+
+  .collection-ui-grid-special__featured .collection-ui-book-media img,
+  .collection-ui-grid-special__item .collection-ui-book-media img {
+    height: var(--spine-height) !important;
+    width: auto !important;
   }
 
   .collection-ui-card--featured {
-    width: 136px;
+    width: var(--collection-ui-grid-special-featured-width);
   }
 
   .collection-ui-card__media--featured {
-    min-height: 204px;
+    min-height: var(--collection-ui-grid-special-featured-height);
+  }
+
+  .collection-ui-banner__copy {
+    order: 2;
+    padding: 0 0 14px;
+  }
+
+  .collection-ui-banner__eyebrow {
+    font-size: 0.875rem;
+    margin-bottom: 12px;
+  }
+
+  .collection-ui-banner__title {
+    font-size: 1.375rem;
+    line-height: 1.2;
+  }
+
+  .collection-ui-banner__description {
+    display: -webkit-box;
+    overflow: hidden;
+    text-align: left;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+
+  .collection-ui .collection-ui-button {
+    margin-bottom: 16px;
+    min-height: 40px;
+    min-width: 0;
+    padding-inline: 18px;
+    white-space: normal;
+  }
+
+  .collection-ui-banner__media-link {
+    max-height: none;
+    order: 1;
+  }
+
+  .collection-ui-special-item {
+    gap: 12px;
+    min-height: 0;
+    padding-block: 0 22px;
+  }
+
+  .collection-ui-special-item__media {
+    height: min(64dvw, 238px);
+    margin-bottom: -12px;
+    transform: translateY(-30px);
+    width: min(54dvw, 176px);
+  }
+
+  .collection-ui-special-item__media .collection-ui-book-media {
+    --spine-height: min(64dvw, 238px) !important;
+    --spine-width: min(46dvw, 162px) !important;
+  }
+
+  .collection-ui-special-item__media .collection-ui-book-media img {
+    height: var(--spine-height) !important;
+    width: auto !important;
+  }
+
+  .collection-ui-special-item__content {
+    min-width: 0;
+  }
+
+  .collection-ui-special-item__content h3 {
+    font-size: 1.125rem;
+    margin-bottom: 10px;
+  }
+
+  .collection-ui-special-item__description {
+    display: -webkit-box;
+    font-size: 0.875rem;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+
+  .collection-ui-special-item__aside {
+    align-items: center;
+    gap: 10px;
+  }
+
+  .collection-ui-grid-title {
+    gap: 18px;
+  }
+
+  .collection-ui-row-item {
+    gap: 14px;
+    max-width: 100%;
+  }
+
+  .collection-ui-row-item__media .collection-ui-book-media {
+    --spine-height: 168px !important;
+    --spine-width: 112px !important;
+  }
+
+  .collection-ui-row-item__media .collection-ui-book-media img {
+    height: var(--spine-height) !important;
+    width: auto !important;
+  }
+
+  .collection-ui-image-grid .collection-ui-title {
+    margin-bottom: 22px;
+  }
+
+  .collection-ui-image-grid__items {
+    gap: 16px 12px;
+    margin-top: 20px;
+  }
+
+  .collection-ui-image-grid--block .collection-ui-image-grid__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .collection-ui-image-grid--block .collection-ui-image-grid__item {
+    min-height: 64px;
+  }
+
+  .collection-ui-image-grid__image {
+    height: auto;
+    max-height: 88px;
+    width: min(100%, 150px);
+  }
+
+  .collection-ui-image-grid--block .collection-ui-image-grid__image {
+    background: var(--color-fg-main, #fff);
+    height: 64px;
+    object-fit: contain;
+    padding: 10px;
+    width: 100%;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__image {
+    aspect-ratio: 1 / 1;
+    border-radius: 999px;
+    height: 128px !important;
+    object-fit: cover;
+    object-position: center top;
+    transform: scale(1.48);
+    width: 128px !important;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__items {
+    gap: 28px 34px;
+    grid-template-columns: repeat(2, minmax(0, 128px));
+    justify-content: center;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__item {
+    min-height: 128px;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__item a {
+    align-items: center;
+    aspect-ratio: 1 / 1;
+    border-radius: 999px;
+    clip-path: circle(50%);
+    display: flex;
+    height: 128px;
+    justify-content: center;
+    overflow: hidden;
+    width: 128px;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__item a img {
+    border-radius: 999px !important;
+    clip-path: circle(50%);
+    height: 128px !important;
+    max-height: none;
+    max-width: none;
+    min-height: 128px;
+    min-width: 128px;
+    object-fit: cover;
+    width: 128px !important;
+  }
+
+  .collection-ui-image-grid__image--square {
+    height: 132px;
+    width: 132px;
   }
 }
 
@@ -1148,7 +1876,6 @@
   }
 
   .collection-ui-banner-source {
-    max-height: 500px;
     padding: 48px;
   }
 
@@ -1168,6 +1895,10 @@
     );
   }
 
+  .collection-ui-banner-grid {
+    gap: 24px;
+  }
+
   .collection-ui-featured--three {
     grid-template-columns: repeat(
       var(--collection-ui-columns, 3),
@@ -1186,9 +1917,9 @@
   }
 
   .collection-ui-special-item {
-    grid-template-columns: minmax(160px, 0.28fr) minmax(0, 0.52fr) minmax(
-        156px,
-        0.2fr
+    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(
+        176px,
+        220px
       );
     justify-items: stretch;
   }
@@ -1232,7 +1963,10 @@
 
 @media (min-width: 1200px) {
   .collection-ui-grid__items {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-columns: repeat(
+      var(--collection-ui-columns, 5),
+      minmax(0, 1fr)
+    );
   }
 
   .collection-ui-vertical__grid {