#yj-creator-v3 .ip-gallery {
  --ip-card-height: 420px;
  padding: 60px 0 31px;
  background: #fff;
}
#yj-creator-v3 .ip-gallery-heading { text-align: center; }
#yj-creator-v3 .ip-gallery-heading h2 {
  color: var(--y-ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.7px;
}
#yj-creator-v3 .ip-gallery-heading h2 span { display: inline-block; white-space: nowrap; }
#yj-creator-v3 .ip-gallery-heading p { margin-top: 12px; color: #717782; font-size: 13px; }
#yj-creator-v3 .ip-gallery-window {
  position: relative;
  max-width: 1440px;
  margin: 34px auto 0;
  overflow: hidden;
}
#yj-creator-v3 .ip-gallery-window::before,
#yj-creator-v3 .ip-gallery-window::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 25px;
  pointer-events: none;
}
#yj-creator-v3 .ip-gallery-window::before { left: 0; background: linear-gradient(90deg, #fff, #ffffff00); }
#yj-creator-v3 .ip-gallery-window::after { right: 0; background: linear-gradient(-90deg, #fff, #ffffff00); }
#yj-creator-v3 .ip-gallery-track { display: flex; gap: 18px; width: 100%; }
#yj-creator-v3 .ip-gallery[data-enhanced="true"] .ip-gallery-track { will-change: transform; }
#yj-creator-v3 .ip-gallery-card {
  position: relative;
  flex: 0 0 24%;
  min-width: 0;
  max-width: var(--ip-card-height);
  height: var(--ip-card-height);
  border-radius: 18px;
  overflow: hidden;
  background: #eeebe6;
}
/* Both approved contact sheets contain square tiles. Keep the tile sized to
   the portrait height, then center the requested column inside each card. */
#yj-creator-v3 .ip-gallery-art {
  --ip-col: 0;
  --ip-row: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: calc(50% + var(--ip-offset)) calc(0px - var(--ip-row) * var(--ip-card-height));
}
#yj-creator-v3 .ip-gallery-art[data-sheet="a"] {
  --ip-offset: calc((.5 - var(--ip-col)) * var(--ip-card-height));
  background-image: url("./ip-gallery/examples-a.webp");
  background-size: calc(var(--ip-card-height) * 2) calc(var(--ip-card-height) * 2);
}
#yj-creator-v3 .ip-gallery-art[data-sheet="b"] {
  --ip-offset: calc((1 - var(--ip-col)) * var(--ip-card-height));
  background-image: url("./ip-gallery/examples-b.webp");
  background-size: calc(var(--ip-card-height) * 3) calc(var(--ip-card-height) * 2);
}
#yj-creator-v3 .ip-gallery-art[data-col="1"] { --ip-col: 1; }
#yj-creator-v3 .ip-gallery-art[data-col="2"] { --ip-col: 2; }
#yj-creator-v3 .ip-gallery-art[data-row="1"] { --ip-row: 1; }
#yj-creator-v3 .ip-gallery-caption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  min-height: 138px;
  padding: 48px 22px 24px;
  background: linear-gradient(0deg, #141c24b3, #141c2400);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  text-shadow: 0 1px 4px #161f2940;
}
@media (max-width: 820px) {
  #yj-creator-v3 .ip-gallery-card { flex-basis: 31%; }
  #yj-creator-v3 .ip-gallery-heading h2 { font-size: 29px; }
  #yj-creator-v3 .ip-gallery-caption { font-size: 14px; padding: 44px 18px 23px; }
}
@media (max-width: 600px) {
  #yj-creator-v3 .ip-gallery { --ip-card-height: 370px; padding: 40px 0 27px; }
  #yj-creator-v3 .ip-gallery-heading h2 { font-size: 27px; }
  #yj-creator-v3 .ip-gallery-heading p { font-size: 12px; margin-top: 10px; }
  #yj-creator-v3 .ip-gallery-window { margin-top: 27px; }
  #yj-creator-v3 .ip-gallery-track { gap: 14px; }
  #yj-creator-v3 .ip-gallery-card { flex-basis: 66%; border-radius: 16px; }
  #yj-creator-v3 .ip-gallery-caption { font-size: 15px; padding: 42px 18px 23px; }
}
@media (max-width: 360px) {
  #yj-creator-v3 .ip-gallery { --ip-card-height: 350px; }
  #yj-creator-v3 .ip-gallery-heading h2 { font-size: 25px; }
  #yj-creator-v3 .ip-gallery-caption { font-size: 14px; }
}
