.sq-image-with-slide {
  padding: 40px 0;
  min-height: 300px;
  @media (min-width: screen-md) {
    padding: 60px 0;
  }
  &__cnt {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    > div {
      flex-basis: 100%;
    }
    @media (min-width: $screen-md) {
      flex-wrap: nowrap;
      > div {
        flex-basis: 50%;
      }
    }
  }
  &__image {
    img {
      width: 100%;
    }
    @media (min-width: $screen-md) {
      padding: 0 20px;
    }
  }

  &__panel {
    position: relative;
    &-inner {
      background-color: $sq-color-gray-lighter;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding: 20px 20px;
      @media (min-width: $screen-md) {
        padding: 60px 40px 40px 40px;
        position: absolute;
        height: auto;
        left: -50px;
        top: 50px;
      }
    }
  }
  &--right {
    .sq-image-with-slide__image {
      @media (min-width:$screen-md) {
        order: 2;
      }
    }
    .sq-image-with-slide__panel {
      &-inner {
        left: unset;
        right: -50px;
      }
      @media (min-width:$screen-md) {
        order: 1;
      }
    }
  }
}