.external-video--short {
  margin-inline: auto;
  max-inline-size: 32.5rem;
}

.external-video__content {
  block-size: 100%;
  position: relative;

  :is(.tiktok-embed) {
    margin: 0 !important;
  }

  :is(.instagram-media) {
    block-size: 100%;
    border-radius: 0 !important;
    inline-size: 100%;
    inset: 0;
    margin: 0 !important;
    position: absolute;
  }

  :is(.tiktok-embed iframe) {
    aspect-ratio: 9 / 16;
    block-size: auto !important;
  }
}

.external-video__iframe {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  position: absolute;
  z-index: 1;
}

.external-video__preview {
  overflow: hidden;
  position: relative;
}

.external-video__preview--hidden {
  display: none;
}

.external-video__preview-image {
  block-size: 100%;
  filter: blur(2px);
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  z-index: 1;

  @include mq($from: m) {
    filter: blur(4px);
  }
}

.external-video__overlay {
  --link-color: var(--color-white);
  --link-hover-color: var(--color-white);
  --link-underline-focus-color: transparent;

  background-image: linear-gradient(0deg, #000 0%, transparent 33%, transparent 67%, #000 100%);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  inset: 0;
  padding: 2rem;
  position: absolute;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  z-index: 2;
}

.external-video__overlay-title {
  --line-clamp: 2;

  font-weight: bold;
  line-height: 1.3;

  @include use-responsive-sizing(font-size, responsive-map(xs 1.4rem, xl 2.6rem));
}

.external-video__overlay-footer {
  align-items: flex-end;
  block-size: 100%;
  display: flex;
  grid-gap: 4rem;
  inline-size: 100%;
  justify-content: space-between;
}

.external-video__overlay-text {
  align-self: flex-end;
  font-size: 1.3rem;
  line-height: 1.3;
}

.external-video__overlay-button {
  --icon-button-text-color: #fff;
}