@import '../variables';

.api-monitoring-section {
  height: 887px;
  padding-top: 1.6 * $section-top-padding;
  padding-bottom: 0;
  overflow: hidden;
  background: $ash;

  .image-side {
    position: relative;
  }
  .text-side {
    margin-top: 195px;
  }
  
  img.code {
    top: 100px;
    left: 85px;
    height: auto;
  }

  img.screenshots {
    top: 300px;
    left: 250px;
    height: auto;
  }

  @include media-breakpoint-down(md) {
    padding-top: $section-top-padding;
    padding-bottom: 0px;
    height: auto;

    .text-side {
      margin-top: 0;
    }

    .image-side {
      position: relative;
      margin-top: 50px;
      height: 340px;

      img.code {
        width: 85%;
        height: auto;
        left: 0;
      }
      img.screenshots {
        left: 110px;
        top: 0;
        width: calc(100% - 110px);
        height: auto;
      }
    }
  }
  @include media-breakpoint-down(sm) {
    .image-side {
      margin-top: 0px;
      height: 300px;

      .big-landing-image {
        position: absolute;
      }
    }
  }
  @include media-breakpoint-down(xs) {
    .image-side {
      height: 37vw;
      img.code {
        top: 50px;
      }
      img.screenshots {
        left: 50px;
        width: calc(100% - 50px);
        height: auto;
      }
    }
  }
}


