Images: Large

@mixin img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.image img {
  @include img;
}

.favicon img {
  width: inherit;
}

.figure,
.caption-img {
  max-width: 370px;
  margin: 0;

  figcaption,
  .figure-caption {
    text-align: right;
    padding: $space_one_half;
    background-color: $grey_lightest;
    color: $grey_darkest;

    .color-scheme-dark & {
      background-color: $dark_mode_grey;
      color: $white;
    }
  }
}

.lehigh-logo {
  margin: 0 $spacer 0 0;
  flex-grow: 2;
  max-width: 180px;

  @include media-breakpoint-up(md) {
    min-width: 200px;
  }

  img {
    .fractal-preview & {
      background-color: $lehigh_brown;
      background-color: var(--lehigh_brown, $lehigh_brown);
    }
  }
}

img {
  &.align-left {
    padding: $spacer $spacer $spacer 0;
  }

  &.align-right {
    padding: $spacer 0 $spacer $spacer;
  }
}