/* Synced from the published RYOTA IWAKOSHI WORKS source. */
.official-works-snapshot {
  --works-ink: #111;
  --works-paper: #f1eee7;
  --works-line: rgba(17, 17, 17, .16);
  color: var(--works-ink);
  background: var(--works-paper);
  padding: clamp(72px, 9vw, 144px) max(24px, calc((100vw - 1280px) / 2));
}
.official-works-snapshot :where(*, *::before, *::after) { box-sizing: border-box; }
.official-works-snapshot :where(img, video, iframe) { display: block; max-width: 100%; }
.official-works-snapshot img { width: 100%; height: auto; object-fit: cover; }
.official-works-snapshot iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.official-works-snapshot :where(.works-list, .work-list, .works-grid, .work-grid, [data-works-list]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.official-works-snapshot :where(article, .work-card, .works-card, [data-work]) {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--works-line);
  overflow: hidden;
}
.official-works-snapshot :where(article, .work-card, .works-card, [data-work]) > :where(div, section):not(.synced-youtube) {
  max-width: 100%;
}
.official-works-snapshot :where(h2, h3, h4, p) { overflow-wrap: anywhere; }
.official-works-snapshot details { border-top: 1px solid var(--works-line); }
.official-works-snapshot details summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 700;
}
.official-works-snapshot details summary::-webkit-details-marker { display: none; }
.official-works-snapshot .synced-youtube { margin-top: 20px; background: #000; }
.official-works-snapshot :where(input[type="search"], input[type="text"]) {
  width: 100%;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  padding: 14px 0;
  font: inherit;
}
.official-works-snapshot :where(button, [role="button"]) { cursor: pointer; }
.official-works-snapshot [hidden] { display: none !important; }
@media (max-width: 980px) {
  .official-works-snapshot :where(.works-list, .work-list, .works-grid, .work-grid, [data-works-list]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .official-works-snapshot { padding: 72px 20px; }
  .official-works-snapshot :where(.works-list, .work-list, .works-grid, .work-grid, [data-works-list]) {
    grid-template-columns: 1fr;
  }
  .official-works-snapshot :where(article, .work-card, .works-card, [data-work]) {
    width: 100%;
  }
}