/* Interactiveの外枠。作品内の材質・照明は個別のDSで扱う。 */
.interactive-heading { font-size: clamp(2.2rem,8vw,7rem); overflow-wrap: anywhere; }
.interactive-feature { display: grid; gap: var(--s-5); color: var(--ink); text-decoration: none; }
.interactive-feature img { width: 100%; height: auto; border-radius: var(--r-thumb); border: 1px solid var(--rule); }
.interactive-feature__caption { display: grid; gap: var(--s-3); }
.interactive-feature__action { text-decoration: underline; text-underline-offset: .25em; font-weight: 700; }
.interactive-feature--type { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--rule); }
.interactive-feature--loom { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--rule); }
@media (min-width: 48rem) {
  .interactive-feature { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); align-items: end; gap: var(--s-7); }
  .interactive-feature__caption { padding-bottom: var(--s-5); }
  .interactive-feature--type { grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); }
  .interactive-feature--type img { grid-column: 2; grid-row: 1; }
  .interactive-feature--type .interactive-feature__caption { grid-column: 1; grid-row: 1; }
  .interactive-feature--loom { grid-template-columns: 1fr; }
  .interactive-feature--loom .interactive-feature__caption { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
  .interactive-feature--loom .work__desc, .interactive-feature--loom .interactive-feature__action { grid-column: 2; }
  #interactive .kind-head { grid-template-columns: 1fr; }
  #interactive .kind-head > div { max-width: 42rem; }
}