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

.inoby-img-with-text {
  background-color: $col-sec;
  padding: 0;
  overflow: hidden;
  @include bp("md") {
    padding: 4rem 0 0;
  }
  .content-wrap {
    @include bp("md-up") {
      padding: 15rem 0;
    }
    .text-wrap {
      .slogan {
        font-family: $font-family-cursive;
        font-size: $fs-h1;
        color: $col-prm;
        line-height: 1;
        margin-bottom: 0;
        @include bp("md") {
          font-size: $fs-h2;
        }
      }
      h2 {
        color: $white;
        &.like-h1 {
          font-size: $fs-h1;
          margin-bottom: 0;
          @include bp("md") {
            font-size: $fs-h2;
          }
        }
      }
      p.text {
        margin-top: 3rem;
        color: $white;
        @include bp("md") {
          margin-top: 1rem;
        }
      }
      &.with-slogan {
        .subheading {
          font-size: $fs-h1;
          @include bp("md") {
            font-size: $fs-h2;
          }
        }
      }
    }
    .button-wrap {
      a {
        margin-top: $space-sm;
        @include bp("sm") {
          width: 100%;
          text-align: center;
        }
      }
    }
  }
  .img-wrap {
    picture {
      img {
        @include bp("xxl-up") {
          transform: scale(1.7);
          transform-origin: left center;
        }
        @include bp("xxl") {
          transform: scale(1.4);
          transform-origin: left center;
        }
        @include bp("xl") {
          transform: scale(1.3);
          transform-origin: left center;
        }
        @include bp("lg") {
          transform: scale(1.2);
          transform-origin: left center;
        }
        @include bp("md") {
          transform: scale(1);
          transform-origin: center;
        }
      }
    }
  }
}
.inoby-img-with-text .img-with-text-wrap.left img {
  transform-origin: right center;
}
.inoby-img-with-text .img-with-text-wrap.left .content-wrap {
  @include bp("md-up") {
    padding: 15rem 15px;
  }
}
