// Figure and image.

figure,
img {
  &.image {
    --padding: .75rem;

    @include respond-to(s) {
      &.center {
        margin-inline: auto;
      }

      &.left {
        padding-inline-end: var(--padding);
        padding-block-end: var(--padding);
        margin: 0;
        float: left;
        clear: both;
      }

      &.right {
        padding-inline-start: var(--padding);
        padding-block-end: var(--padding);
        margin: 0;
        float: right;
        clear: both;
      }
    }
  }
}

figure {
  &.image {
    --padding: .75rem;

    figcaption {
      padding-block-start: var(--padding);

      @include respond-to(s) {
        display: table-caption;
        caption-side: bottom;
        padding-block-start: 0;
      }

      p {
        margin: 0;
      }
    }

    @include respond-to(s) {
      display: table;

      &.left {
        figcaption {
          padding-inline-end: var(--padding);
          padding-block-end: var(--padding);
        }
      }

      &.right {
        figcaption {
          padding-inline-start: var(--padding);
          padding-block-end: var(--padding);
        }
      }
    }
  }
}