/**=====================
     Ratio scss
==========================**/
.ratio_12 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 12%;
      display: block;
    }
  }
}

.ratio_30 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 30%;
      display: block;
    }
  }
}

.ratio_35 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 35%;
      display: block;
    }
  }
}

.ratio_45 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 45.4%;
      display: block;
    }
  }
}

.ratio_50 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 50%;
      display: block;
    }
  }
}

.ratio_52 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 52%;
      display: block;
    }
  }
}

.ratio_50_1 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 50%;
      display: block;

      @include mq-max(4xl) {
        padding-top: 57%;
      }

      @include mq-max(xl) {
        padding-top: 80%;
      }

      @include mq-max(lg) {
        padding-top: 59%;
      }

      @include mq-max(md) {
        padding-top: 68%;
      }

      @include mq-max(sm) {
        padding-top: 77%;
      }

      @include mq-max(xs) {
        padding-top: 84%;
      }
    }
  }
}

.ratio_58 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 58%;
      display: block;
    }
  }
}

.ratio_60 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 60%;
      display: block;
    }
  }
}

.ratio_65 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 65%;
      display: block;
    }
  }
}

.ratio_87 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 87%;
      display: block;
    }
  }
}

.ratio_square {
  .bg-size {
    &:before {
      padding-top: 100%;
      content: "";
      display: block;
    }
  }
}

.ratio_110 {
  .bg-size {
    &:before {
      padding-top: 110%;
      content: "";
      display: block;
    }
  }
}

.ratio_125 {
  .bg-size {
    &::before {
      content: "";
      padding-top: 125%;
      display: block;
    }
  }
}

.ratio_148 {
  .bg-size {
    &::before {
      content: "";
      padding-top: 148%;
      display: block;
    }
  }
}

.ratio_156 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 156%;
      display: block;
    }
  }
}

.ratio_medium {
  .bg-size {
    &:before {
      content: "";
      padding-top: 134%;
      display: block;
    }
  }
}

.ratio_180 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 180%;
      display: block;
    }
  }
}

.ratio_209 {
  .bg-size {
    &:before {
      content: "";
      padding-top: 209%;
      display: block;
    }
  }
}

.ratio_148_1 {
  .bg-size {
    content: "";
    padding-top: 148%;
    display: block;

    @include mq-max(xl) {
      padding-top: 88%;
    }
  }
}

.b-bottom {
  background-position: bottom;
}

.b-top {
  .bg-size {
    background-position: top;
  }
}

.b-left {
  .bg-size {
    background-position: left;
  }
}

.b-right {
  .bg-size {
    background-position: right;
  }
}

.b-cl {
  .bg-size {
    background-position: center left;
  }
}

.b-c {
  .bg-size {
    background-position: center;
  }
}