.video-showcase {
  border-top: 1px solid #edf0f4;
  padding-top: 57px;
  padding-bottom: 70px;
}
.video-showcase .video-showcase-heading { margin-bottom: 39px; }
.video-showcase .video-showcase-heading h2 { margin-top: 12px; }
.video-showcase .video-showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  grid-template-areas: "media copy";
  align-items: center;
  gap: 48px;
}
.video-showcase .video-showcase-row + .video-showcase-row {
  margin-top: 52px;
  padding-top: 52px;
  border-top: 1px solid #edf0f4;
}
.video-showcase .video-showcase-row-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr);
  grid-template-areas: "copy media";
}
.video-showcase .video-showcase-media {
  position: relative;
  grid-area: media;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  overflow: hidden;
  background: #edf2f7;
  isolation: isolate;
}
.video-showcase video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.video-showcase video:focus-visible {
  outline: 3px solid #89b6ff;
  outline-offset: -4px;
}
.video-showcase .video-showcase-copy { grid-area: copy; min-width: 0; }
.video-showcase .video-showcase-copy .eyebrow { font-size: 11px; letter-spacing: .13em; }
.video-showcase .video-showcase-copy h3 {
  margin-top: 16px;
  max-width: 12em;
  font-size: calc(clamp(27px, 2.5vw, 34px) + 2px);
  line-height: 1.15;
}
.video-showcase .video-showcase-copy p {
  margin-top: 18px;
  max-width: 32em;
  font-size: 18px;
  line-height: 1.75;
  color: #52647a;
}
.video-showcase .video-showcase-copy .eyebrow { font-size: 13px; color: #536d8a; }
.video-showcase .video-showcase-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; background: linear-gradient(180deg, #06193100 55%, #06193124); color: #fff; border-radius: inherit; }
.video-showcase .video-showcase-play>span { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid #ffffffa6; border-radius: 50%; background: #ffffffed; color: #145df5; box-shadow: 0 8px 35px #0a244e30; transition: transform .2s, background .2s; }
.video-showcase .video-showcase-play:hover>span { transform: scale(1.06); background: #fff; }
.video-showcase .video-showcase-play svg { width: 28px; height: 28px; margin-inline-start: 1px; fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.video-showcase .video-showcase-link { margin-top: 24px; border-color: #cadbf0; background: #fff; color: #145df5; font-size: 15px; font-weight: 600; gap: 16px; }
.video-showcase .video-showcase-link:hover { border-color: #97b7e4; background: #f2f7ff; }
.video-showcase .video-showcase-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.video-showcase .video-showcase-sound {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 21px;
  min-height: 44px;
  padding: 7px 0;
  color: #145df5;
  font-size: 14px;
  font-weight: 550;
  text-align: start;
}
.video-showcase .video-showcase-sound:hover { color: #074ad5; }
.video-showcase .video-showcase-sound svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  flex-shrink: 0;
}
@media (max-width: 960px) {
  .video-showcase .video-showcase-row { gap: 30px; }
  .video-showcase .video-showcase-copy h3 { font-size: 29px; }
  .video-showcase .video-showcase-copy p { font-size: 17px; line-height: 1.7; }
}
@media (max-width: 760px) {
  .video-showcase { padding-top: 42px; padding-bottom: 46px; }
  .video-showcase .video-showcase-heading { margin-bottom: 28px; }
  .video-showcase .video-showcase-heading h2 { font-size: 32px; }
  .video-showcase .video-showcase-row,
  .video-showcase .video-showcase-row-reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "copy";
    gap: 24px;
  }
  .video-showcase .video-showcase-row + .video-showcase-row { margin-top: 34px; padding-top: 34px; }
  .video-showcase .video-showcase-media { border-radius: 12px; }
  .video-showcase .video-showcase-copy h3 { margin-top: 12px; max-width: none; font-size: 30px; }
  .video-showcase .video-showcase-copy p { margin-top: 13px; max-width: 38em; }
  .video-showcase .video-showcase-sound { margin-top: 13px; }
  .video-showcase .video-showcase-play>span { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-showcase .video-showcase-play>span { transition: none; }
}