@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';
@use '../../sass/abstracts/mixins';

#{$component-prefix}image {
  text-align: center;
  position: relative;

  &--width-100 {
    width: 100%;
  }

  &--height-500-pixels img {
    max-height: 500px;
    width: 100%;
    object-fit: cover;
  }

  img {
    max-width: 100%;
    margin: auto;
    height: auto;
    display: inline-block; // To prevent layout shifting on rendering
  }

  figcaption {
    text-align: left;
  }

  &[class*=' u-background-color-'] {
    figcaption {
      padding: 0rem 0.5rem 0.5rem 0.5rem;
    }
  }

  &:last-child img {
    display: block !important;
  }

  &__text-on-image {
    @include mixins.media-breakpoint-up(md) {
      @include typography.display-large;
      color: $white;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: $spacer-7;
      font-style: normal;
      margin: 0;
    }
  }
}