:root {
  --rich-text__img-gap: var(--gap-static);
}

wm-rich-text {
  img {
    border-radius: var(--border-radius--lg);

    &:not(:last-child) {
      margin: 0 0 var(--rich-text__img-gap);
    }

    &.align-left,
    &.align-right {
      float: none;
    }

    &.align-center {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  }

  .caption-img {
    display: block;
    margin-bottom: var(--rich-text__img-gap);

    img {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin-bottom: 0;
    }

    &.align-left,
    &.align-right {
      float: none;
      margin: 0 0 var(--rich-text__img-gap);
    }
  }

  .caption > figcaption {
    border-bottom: var(--border-width--sm) solid var(--caption-border-color, var(--color--mid-gray));
    color: var(--caption__color, var(--container__color));
    display: block;
    font-size: var(--font-size--p-sm);
    padding: var(--gap-static--sm) 0;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  wm-rich-text {
    img,
    .caption-img {
      &.align-right {
        float: right;
        margin: 0 0 var(--rich-text__img-gap) var(--rich-text__img-gap);
      }

      &.align-left {
        float: left;
        margin: 0 var(--rich-text__img-gap) var(--rich-text__img-gap) 0;
      }
    }
  }
}

wm-hero-landing {
  wm-rich-text {
    img {
      border-radius: 0;
    }
  }
}