#works.works-synced {
  --works-ink: #111;
  --works-paper: #f3f1ea;
  --works-line: rgba(17, 17, 17, .16);
  background: var(--works-paper);
  color: var(--works-ink);
  padding-block: clamp(72px, 9vw, 140px);
}

#works .official-works-sync {
  width: min(1280px, calc(100% - clamp(32px, 7vw, 112px)));
  margin-inline: auto;
}

#works .official-works-sync > :first-child { margin-top: 0; }
#works .official-works-sync img,
#works .official-works-sync video { max-width: 100%; height: auto; }

#works .works-sync-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  margin: 34px 0 42px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--works-line);
  background: rgba(255,255,255,.76);
}

#works .works-sync-search { display: grid; gap: 12px; }
#works .works-sync-search span {
  font: 700 11px/1.2 Arial, sans-serif;
  letter-spacing: .22em;
}
#works .works-sync-search input {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: clamp(16px, 2vw, 20px);
}
#works .works-sync-count {
  margin: 0 0 12px;
  color: #8e6c20;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

#works .official-works-sync :is(.works-grid, .work-grid, [class*="works-grid"], [class*="work-grid"], [class*="works-list"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 38px);
}

#works .official-works-sync :is(article, [class*="work-card"], [class*="works-card"], [class*="work-item"]) {
  min-width: 0;
}

#works .official-works-sync details {
  margin-top: 20px;
  border-top: 1px solid var(--works-line);
  border-bottom: 1px solid var(--works-line);
}
#works .official-works-sync summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
#works .official-works-sync summary::-webkit-details-marker { display: none; }
#works .works-detail-mark { font-size: 24px; font-weight: 400; }
#works .official-works-sync details > :not(summary) { margin-bottom: 20px; }

#works .works-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: 22px;
  background: #080808;
}
#works .works-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 720px) {
  #works .official-works-sync { width: min(100% - 32px, 640px); }
  #works .works-sync-tools { grid-template-columns: 1fr; }
  #works .works-sync-count { margin: 0; }
  #works .official-works-sync :is(.works-grid, .work-grid, [class*="works-grid"], [class*="work-grid"], [class*="works-list"]) {
    grid-template-columns: 1fr;
  }
  #works .official-works-sync summary { min-height: 64px; }
}