/* The original Mastery gallery: two continuous rows of student sites. */
.creations-gallery { display:grid; gap:24px; padding-top:8px; }
.creations-row {
  display:flex;
  gap:24px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  overflow-anchor:none;
  scrollbar-width:thin;
  scrollbar-color:#c5b5d2 transparent;
  padding:2px 0 8px;
  mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
}
[data-creations-bound] .creations-row { scrollbar-width:none; }
[data-creations-bound] .creations-row::-webkit-scrollbar { display:none; }
.creations-row:focus-visible { outline:3px solid var(--purple); outline-offset:2px; mask-image:none; }
.creation-card { flex:0 0 clamp(280px,32vw,460px); min-width:0; margin:0; }
.creation-frame {
  aspect-ratio:16 / 10;
  overflow:hidden;
  border:1px solid #e7e5e0;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px #3233390d;
}
.creation-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.creation-card figcaption { margin-top:10px; color:var(--ink); font:400 16px/1.5 var(--serif); }
.creations-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:28px; }
.creations-playback {
  flex:none;
  min-height:42px;
  padding:10px 16px;
  border:1px solid #c9c0cd;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font:500 12px/1.4 var(--sans);
  cursor:pointer;
}
.creations-playback[hidden] { display:none; }
.creations-playback:hover { background:#eee7f8; }
.creations-playback:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
.creations-playback:disabled { cursor:default; opacity:.6; }
@media(max-width:650px) {
  .creations-gallery { gap:20px; }
  .creations-row { gap:16px; }
  .creation-card { flex-basis:82%; }
  .creation-card figcaption { font-size:14px; }
  .creations-footer { align-items:flex-start; flex-direction:column; gap:18px; }
}