/*
 * Home-only performance overrides.
 *
 * Keeps the visual design, but lets modern browsers use much lighter WebP
 * backgrounds for the heavy category grid images.
 */

@supports (background-image: image-set(url("test.webp") type("image/webp") 1x)) {
  .categories-grid__item--1 {
    background-image: image-set(
      url("../images/categories/categ-1.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-1.png") type("image/png") 1x
    );
  }

  .categories-grid__item--2 {
    background-image: image-set(
      url("../images/categories/categ-2.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-2.png") type("image/png") 1x
    );
  }

  .categories-grid__item--3 {
    background-image: image-set(
      url("../images/categories/categ-3.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-3.png") type("image/png") 1x
    );
  }

  .categories-grid__item--4 {
    background-image: image-set(
      url("../images/categories/categ-4.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-4.png") type("image/png") 1x
    );
  }

  .categories-grid__item--5 {
    background-image: image-set(
      url("../images/categories/categ-5.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-5.png") type("image/png") 1x
    );
  }

  .categories-grid__item--6 {
    background-image: image-set(
      url("../images/categories/categ-6.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-6.png") type("image/png") 1x
    );
  }

  .categories-grid__item--7 {
    background-image: image-set(
      url("../images/categories/categ-7.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-7.png") type("image/png") 1x
    );
  }

  .categories-grid__item--8 {
    background-image: image-set(
      url("../images/categories/categ-8.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-8.png") type("image/png") 1x
    );
  }

  .categories-grid__item--9 {
    background-image: image-set(
      url("../images/categories/categ-9.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-9.png") type("image/png") 1x
    );
  }

  .categories-grid__item--10 {
    background-image: image-set(
      url("../images/categories/categ-10.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-10.png") type("image/png") 1x
    );
  }

  .categories-grid__item--11 {
    background-image: image-set(
      url("../images/categories/categ-11.png.webp") type("image/webp") 1x,
      url("../images/categories/categ-11.png") type("image/png") 1x
    );
  }
}

/* Category grid: align images to the right for smaller (4-per-row) cards */
.categories-grid__item:nth-child(n+4) {
  background-position: right;
}