#showcase { padding: clamp(70px, 6vw, 112px) 3.5vw clamp(100px, 10vw, 180px); }
.showcase-grid { --columns: 4; --gap: clamp(32px, 3.5vw, 68px); display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: var(--gap); max-width: 1880px; margin: 0 auto; }
.showcase-track { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(64px, 6vw, 115px); padding-top: var(--offset, 0px); min-width: 0; }
.showcase-art { margin: 0; width: var(--scale, 100%); align-self: var(--align, flex-start); }
.showcase-art img { width: 100%; height: auto; display: block; border: 0; outline: 0; }
.showcase-art.will-reveal { opacity: 0; transform: translateY(16px); transition: opacity 1.2s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1); }
.showcase-art.is-visible { opacity: 1; transform: none; }
@media(min-width: 1680px) { .showcase-grid { --columns: 5; } }
@media(max-width: 1100px) { .showcase-grid { --columns: 3; } }
@media(max-width: 700px) {
  #showcase { padding: 72px 5vw 100px; }
  .showcase-grid { --columns: 2; --gap: 7vw; }
  .showcase-track { gap: 52px; }
}
@media(prefers-reduced-motion: reduce) {
  .showcase-art.will-reveal { opacity: 1; transform: none; transition: none; }
}