DNDTools/src/responsive.scss

@mixin width-large {
  @media (width >= 1920px) {
    @content;
  }
}

@mixin width-medium {
  @media (width >= 1707px) {
    @content;
  }
}

@mixin width-small {
  @media (width >= 1494px) {
    @content;
  }
}

@mixin width-xsmall {
  @media (width < 1445px) {
    @content;
  }
}

@mixin height-large {
  @media (height >= 1080px) {
    @content;
  }
}

@mixin height-medium {
  @media (height >= 1001px) {
    @content;
  }
}

@mixin height-small {
  @media (height >= 934px) {
    @content;
  }
}

@mixin height-xsmall {
  @media (height < 934px) {
    @content;
  }
}

.h840 {
  position: absolute;
  border-top: 2px solid green;
  top: 840px;
  width: 100%;
  z-index: 9999999;
}
.h864 {
  position: absolute;
  border-top: 2px solid black;
  top: 864px;
  width: 100%;
  z-index: 9999999;
  &:before {
    content: "864";
  }
}

.h910 {
  position: absolute;
  border-top: 2px solid green;
  z-index: 9999999;
  top: 910px;
  width: 100%;
}
.h934 {
  position: absolute;
  border-top: 2px solid black;
  top: 934px;
  width: 100%;
  z-index: 9999999;
  &:before {
    content: "934";
  }
}

.h977 {
  position: absolute;
  border-top: 2px solid green;
  top: 977px;
  width: 100%;
  z-index: 9999999;
}
.h1001 {
  position: absolute;
  border-top: 2px solid black;
  top: 1001px;
  z-index: 9999999;
  width: 100%;
  &:before {
    content: "1001";
  }
}

.h1056 {
  position: absolute;
  border-top: 2px solid green;
  top: 1056px;
  z-index: 9999999;
  width: 100%;
}
.h1080 {
  position: absolute;
  border-top: 2px solid black;
  top: 1080px;
  width: 100%;
  z-index: 9999999;
  &:before {
    content: "1080";
  }
}

.w1470 {
  position: absolute;
  border-left: 2px solid green;
  left: 1470px;
  height: 100%;
  top: 0;
  z-index: 9999999;
}
.w1494 {
  position: absolute;
  border-left: 2px solid black;
  left: 1494px;
  top: 0;
  z-index: 9999999;
  height: 100%;
  &:before {
    content: "1494";
  }
}

.w1683 {
  position: absolute;
  border-left: 2px solid green;
  left: 1683px;
  height: 100%;
  z-index: 9999999;
  top: 0;
}

.w1707 {
  position: absolute;
  border-left: 2px solid black;
  left: 1707px;
  height: 100%;
  top: 0;
  z-index: 9999999;
  &:before {
    content: "1705";
  }
}

.w1896 {
  position: absolute;
  border-left: 2px solid green;
  left: 1896px;
  height: 100%;
  z-index: 9999999;
  top: 0;
}

.w1920 {
  position: absolute;
  border-left: 2px solid black;
  left: 1920px;
  height: 100%;
  z-index: 9999999;
  top: 0;
  &:before {
    content: "1920";
  }
}