@import "variables";
@import "mixins";

.inoby-img-with-text {
  padding: $space-md 0;
  @include bp("sm") {
    padding: $space-sm 0;
  }
  .img-with-text-wrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3rem;
    align-items: center;
    grid-auto-flow: dense;
    @include bp("md") {
      grid-template-columns: 1fr;
    }

    .img-wrap {
      grid-column: 1 / span var(--img-with-text-img-col, 6);
      justify-self: flex-start;
      @include bp("md") {
        grid-column: 1;
        grid-row: 2;
      }
      picture {
        img {
          width: 100%;
          height: auto;
        }
      }
    }

    .content-wrap {
      grid-column: span var(--img-with-text-text-col, 6) / 13;
      @include bp("md") {
        grid-column: 1;
        grid-row: 1;
      }
    }

    &.right {
      .img-wrap {
        grid-column: span var(--img-with-text-img-col, 6) / 13;
        justify-self: flex-end;
        @include bp("md") {
          grid-column: 1;
        }
      }
      .content-wrap {
        grid-column: 1 / span var(--img-with-text-text-col, 6);
        @include bp("md") {
          grid-column: 1;
        }
      }
    }
    img {
      @include bp("sm") {
        margin-bottom: $space-xs;
      }
    }
    .content-wrap {
      p {
        margin: 0;
      }
    }
  }
}
