@use "@infineon/design-system-tokens/dist/tokens";

.ifx__paragraph-with-image {
  img,
  .ifx__aspect-ratio__box-wrapper {
    margin-bottom: tokens.$spacing-m;
  }

  &--position-right, 
  &--position-left {
    img,
    .ifx__aspect-ratio__box-wrapper {
      @include media-breakpoint-up(md) {
        margin-bottom: 0;
      }
    }
  }

  &--position-bottom {
    img,
    .ifx__aspect-ratio__box-wrapper {
      margin-top: tokens.$spacing-m;
      margin-bottom: 0;
    }
  }

  &--position-right {
    > .row {
      @include media-breakpoint-up(md) {
        flex-direction: row-reverse;
      }
    }
  }
}