/* Only the revised visual-system artwork compositions. */
.case--visual-system { --vs-media: #101010; }
.vs-slider--mobile { display: none; }
.vs-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 523;
  overflow: hidden;
  border-radius: 16px;
  background: var(--vs-media);
}
.vs-video { width: 100%; aspect-ratio: 1000 / 523; overflow: hidden; border-radius: 12px; }
.vs-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-video--phone { width: 24.004%; aspect-ratio: 240.038 / 522.822; border-radius: 16px; }
.vs-video--phone::after { content: ""; position: absolute; top: 1.23%; left: 32.58%; width: 34.3%; height: 3.94%; border-radius: 72px; background: var(--black); }
.vs-youtube { flex-direction: column; gap: 0; }
.vs-youtube .crop-box { flex: none; width: 91.1%; border-radius: 0; }
.vs-youtube__banner { aspect-ratio: 911 / 296; }
.vs-youtube__grid { aspect-ratio: 911 / 227; }
.vs-youtube__banner img { height: 115.72%; left: -18.66%; top: -13.85%; width: 132.85%; }
.vs-youtube__grid img { height: 245.23%; left: -16.39%; top: -36.21%; width: 128.54%; }
.vs-grid { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6%; align-items: center; }
.vs-grid img { display: block; width: 100%; height: auto; border-radius: 4px; }
.vs-grid--posts img { aspect-ratio: 237.956 / 323.377; object-fit: cover; }
.vs-grid--pdfs { gap: 1%; }
.vs-grid--pdfs img { aspect-ratio: 242.571 / 431.238; object-fit: cover; border-radius: 8px; }
.vs-grid--income-titles { width: 90.8%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.3% 1.762%; }
.vs-grid--income-titles img { aspect-ratio: 445 / 253; object-fit: cover; border-radius: 12px; }
.vs-title-grid { display: grid; width: 100%; grid-template-columns: 58.5% 38.1%; column-gap: 3.2%; align-items: center; }
.vs-title-grid__landscape, .vs-title-grid__portrait { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.vs-title-grid img { width: 100%; height: auto; border-radius: 4px; }
.vs-title-grid__landscape img { aspect-ratio: 290 / 163; object-fit: cover; }
.vs-title-grid__portrait img { aspect-ratio: 188 / 335; object-fit: cover; }
.vs-combo { display: flex; flex-direction: column; gap: 12px; }
.vs-combo__thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.086%; }
.vs-combo__thumbs img { width: 100%; height: auto; aspect-ratio: 169.638 / 95.421; object-fit: cover; border-radius: 4.116px; }
.case--visual-system .slider__foot { order: 4; }

@media (max-width: 959px) {
  .vs-slider--desktop { display: none; }
  .vs-slider--mobile { display: flex; }
  .vs-panel { aspect-ratio: auto; border-radius: 5.524px; }
  .vs-video { aspect-ratio: 343 / 179.389; border-radius: 4px; }
  .vs-panel--phone { background: transparent; }
  .vs-video--phone { width: 49.482%; aspect-ratio: 169.724 / 369.673; border-radius: 14.274px; }
  .vs-youtube { gap: 12px; background: transparent; }
  .vs-youtube .crop-box { width: 100%; border-radius: 4.116px; }
  .vs-youtube__banner { aspect-ratio: 343 / 111.475; }
  .vs-youtube__grid { aspect-ratio: 343 / 179.389; }
  .vs-youtube__grid img { height: 116.75%; top: -16.47%; }
  .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vs-panel--posts, .vs-panel--pdfs { background: transparent; }
  .vs-grid--posts img { aspect-ratio: 167.5 / 227.372; border-radius: 2.145px; }
  .vs-grid--pdfs img { aspect-ratio: 167.5 / 297.778; border-radius: 5.524px; }
  .case--visual-system .direction { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px 24px; padding: 0; }
  .case--visual-system .direction__avatar { width: 104px; height: 104px; box-shadow: none; }
  .case--visual-system .swatches { justify-content: flex-end; gap: 8px; }
  .case--visual-system .swatch { width: min(64px, calc((100vw - 184px) / 3)); height: auto; aspect-ratio: 1; border-radius: 15.059px; }
  .case--visual-system .direction__note { grid-column: 1 / -1; width: 100%; }
  .case--visual-system .tabs--numbers { gap: 8px; }
  .case--visual-system .tabs--numbers .tabs__btn { width: auto; flex: 1; }
}