.page-image {
  $self: &;
  &__image-caption {
    @include theme-media-caption();
  }

  &__image-credit {
    @include theme-media-credit();
  }

  &__image-display-name {
    font-family: $theme-page-body-images-title-font-family;
    font-size: $theme-page-body-images-title-font-size;
    font-weight: $theme-page-body-images-title-font-weight;
    line-height: $theme-page-body-images-title-line-height;
  }

  &__wrapper {
    @include border-radius($theme-primary-media-border-radius);
    @include box-shadow($theme-primary-media-box-shadow);
  }

  &__image {
    @include border-radius($theme-primary-media-border-radius);
  }

  > :last-child:not(#{ $self }__wrapper) {
    border-bottom: 1px solid #ccc;
  }

  @each $ar in $marko-web-node-image-aspect-ratios {
    $x: nth($ar, 1);
    $y: nth($ar, 2);

    &--fluid-#{$x}by#{$y} {
      #{ $self } {
        &__wrapper {
          @include marko-web-node-fluid-image($x, $y);
        }
        &__image {
          @include marko-web-node-fluid-image-item();
        }
      }
    }
    // Add the inverse ratios (16by9 becomes 9by16, 4by3 becomes 3by4, etc)
    @if $x != $y {
      &--fluid-#{$y}by#{$x} {
        #{ $self } {
          &__wrapper {
            @include marko-web-node-fluid-image($x, $y);
          }
          &__image {
            @include marko-web-node-fluid-image-item();
          }
        }
      }
    }
  }

  &--primary-image-inline {
    float: right;
    max-width: 250px;
    margin-top: calc(($theme-page-body-line-height - 1) * .5em);
    margin-bottom: 0;
    margin-left: .75rem;

    @include media-breakpoint-down(xs) {
      float: none;
      margin: .75rem auto;
    }

    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
      margin-top: calc(($theme-page-body-line-height-sm - 1) * .5em);
    }

    #{ $self } {
      &__wrapper {
        border-radius: 0;
        box-shadow: none;
      }
      &__image {
        border-radius: 0;
      }
    }
  }

  &--primary-image-inline-left {
    float: left;
    margin-right: .75rem;
    margin-left: 0;
  }
}

[data-embed-type="image"] {
  picture {
    > :last-child:not(img) {
      border-bottom: 1px solid #ccc;
    }
  }
}
