Ретінізація фонових зображень

Ретінізація фонових зображень

.price {
  background-image: url(../images/price/bg-price_sm.png),
    linear-gradient(to bottom, #191c26, #191c26);
  background-image: -webkit-image-set(url(../images/price/bg-price_sm.webp) 1x),
    linear-gradient(to bottom, #191c26, #191c26);

  // Завантаження ретінізованого 2х фонового зображення
  @include mq(retina) {
    background-image: url(../images/price/bg-price_sm@2x.png),
      linear-gradient(to bottom, #191c26, #191c26);

    background-image: -webkit-image-set(url(../images/price/bg-price_sm@2x.webp) 2x),
      linear-gradient(to bottom, #191c26, #191c26);
  }

    |============================
    | Завантаження звичайного фонового зображення для планшету
    |============================
  @include mq(tablet) {
    background-image: url(../images/price/bg-price_md.png),
      linear-gradient(to bottom, #191c26, #191c26);
    background-image: -webkit-image-set(url(../images/price/bg-price_md.webp) 1x),
      linear-gradient(to bottom, #191c26, #191c26);

    // Завантаження ретінізованого 2х фонового зображення
    @include mq(retina) {
      background-image: url(../images/price/bg-price_md@2x.png),
        linear-gradient(to bottom, #191c26, #191c26);
    
    background-image: -webkit-image-set(url(../images/price/bg-price_md@2x.webp) 2x),
      linear-gradient(to bottom, #191c26, #191c26);
    }
  }

    |============================
    | Завантаження звичайного фонового зображення для десктопної версії
    |============================
  @include mq(desktop) {
    background-image: url(../images/price/bg-price_lg.png),
      linear-gradient(to bottom, #191c26, #191c26);
    background-image: -webkit-image-set(url(../images/price/bg-price_lg.webp) 1x),
      linear-gradient(to bottom, #191c26, #191c26);

    // Завантаження ретінізованого 2х фонового зображення
    @include mq(retina) {
      background-image: url(../images/price/bg-price_lg@2x.png),
        linear-gradient(to bottom, #191c26, #191c26);
    
    background-image: -webkit-image-set(url(../images/price/bg-price_lg@2x.webp) 2x),
      linear-gradient(to bottom, #191c26, #191c26);
    }
  }
}