.tuis-topic .topic-heading--motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-content: end;
  min-block-size: max(316px, 36vw, min(42.86vw, 650px));
  padding: 32px 6% clamp(24px, 5vw, 52px);
}

.topic-heading--motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #10171c96, #10171c65 40%, #10171c00 85%);
}

.topic-heading--motion .topic-motion-video {
  position: absolute;
  z-index: -2;
  inset-inline: 0;
  top: calc(50% + 12px);
  transform: translateY(-50%);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 3;
  object-fit: contain;
  pointer-events: none;
}

.topic-heading--motion .topic-motion-copy {
  display: grid;
  gap: clamp(14px, 1.75vw, 24px);
  text-shadow: 0 1px 5px #10171c, 0 1px 12px #10171c;
}

.topic-heading--motion .topic-motion-copy p { margin: 0; }

@media (max-width: 700px) {
  .tuis-topic .topic-heading--motion { min-block-size: max(282px, 42.86vw); }
  .tuis-topic .topic-heading--motion h1 { min-block-size: 0; }
}

@media (max-width: 450px) {
  .topic-heading--motion .topic-motion-video { top: 60%; }
}

@media (max-width: 350px) {
  .tuis-topic .topic-heading--motion { min-block-size: 300px; }
}

.topic-motion-start {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 6%;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  border: 1px solid #8198a4;
  background: #182833;
  color: #eef6fa;
  font-size: .875rem;
  text-decoration: none;
}

.topic-motion-start[hidden] { display: none; }