.work-collection {
  --collection-gap: 20px;
  --collection-height: clamp(220px, 18vw, 270px);
  padding: 76px 0 36px;
  overflow: hidden;
  background: #f1f3f2;
  color: #101719;
}
.collection-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}
.collection-heading .eyebrow { color: #42657b; margin-bottom: 22px; }
.collection-heading h2 { font-size: clamp(64px, 7.5vw, 104px); line-height: .98; letter-spacing: -.065em; }
.collection-heading h2 span {
  background: linear-gradient(110deg, #657780 6%, #0079b8 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.collection-intro { padding: 0 3px 6px 0; min-width: 240px; }
.collection-intro p { font-size: 16px; line-height: 1.6; color: #5a6c76; margin-bottom: 22px; }
.collection-link { display: inline-block; font-size: 13px; padding-block: 8px; }
.collection-link::after { transform: scaleX(1); opacity: .65; }
.collection-link:hover::after { opacity: 1; }
.collection-reels { display: grid; gap: 20px; }
.collection-row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.collection-row::-webkit-scrollbar { display: none; }
.collection-track { display: flex; width: max-content; }
.collection-group { display: flex; gap: var(--collection-gap); align-items: center; padding-right: var(--collection-gap); flex: 0 0 auto; }
.collection-photo {
  margin: 0;
  flex: 0 0 auto;
  width: calc(var(--collection-height) * 1.02);
  height: var(--collection-height);
  overflow: hidden;
  border-radius: 5px;
  background: #d9dfe0;
  isolation: isolate;
}
.collection-photo--wide { width: calc(var(--collection-height) * 1.48); }
.collection-photo--portrait { width: calc(var(--collection-height) * .82); }
.collection-photo--square { height: calc(var(--collection-height) * .88); }
.collection-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.65,.25,1); }
.collection-row[data-direction="right"] { --collection-height: clamp(200px, 15.7vw, 235px); }
.collection-row[data-direction="right"] .collection-photo--wide { height: calc(var(--collection-height) * .92); }
.collection-row[data-direction="right"] .collection-photo--square { height: var(--collection-height); }
.collection-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; color: #5d707b; font-size: 11px; }
.collection-foot .line-link { color: #283e4b; padding-block: 8px; font-size: 12px; }
.collection-running .collection-row { overflow: hidden; }
.collection-running .collection-track { will-change: transform; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .collection-photo:hover img { transform: scale(1.035); }
}
.collection-row:focus-visible { outline-offset: -3px; }
@media (max-width: 700px) {
  .work-collection { --collection-gap: 12px; --collection-height: 210px; padding: 64px 0 34px; }
  .collection-heading { align-items: flex-start; gap: 22px; margin-bottom: 32px; flex-direction: column; }
  .collection-heading .eyebrow { margin-bottom: 18px; }
  .collection-heading h2 { font-size: clamp(62px, 13vw, 86px); }
  .collection-intro { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; padding: 0; }
  .collection-intro p { font-size: 12px; line-height: 1.6; margin: 0; }
  .collection-link { font-size: 12px; flex-shrink: 0; }
  .collection-reels { gap: 12px; }
  .collection-row[data-direction="right"] { --collection-height: 178px; }
  .collection-foot { margin-top: 24px; font-size: 10px; gap: 16px; }
  .collection-foot .line-link { font-size: 11px; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-photo img { transition: none; }
}