/**
 * @file
 * Embedded Media.
 */

figure {
  width: fit-content;
  margin: var(--spacing-l) 0;
  background-color: var(--theme-surface-alt);
}

figcaption {
  padding: var(--sp1-5);
  color: var(--theme-text-color-soft);
  background: var(--theme-surface-alt);
  font-size: var(--body-s-size);
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);

  @media (width > 700px) {
    padding: var(--sp2);
  }
}

.align-right {
  float: none;
  max-width: 100%;

  /* Intentionally not using CSS logical properties on code block below. This
     class is added by the editor, and editor should respect their input. */
  @container (width > 1000px) {
    float: right;
    max-width: 50%;
    margin-block: 0;
    margin-left: var(--spacing-xs);
  }
}

.align-left {
  float: none;
  max-width: 100%;

  /* Intentionally not using CSS logical properties on code block below. This
     class is added by the editor, and editor should respect their input. */
  @container (width > 1000px) {
    float: left;
    max-width: 50%;
    margin-block: 0;
    margin-right: var(--spacing-xs);
  }
}

.align-center {
  img,
  video,
  audio {
    display: block;
    margin-inline: auto;
  }
}

.media-oembed-content {
  display: block;
  max-width: 100%;
}