.icon {
  width: 56px;
  height: 56px;

  background-image: url("/static/icons/math.png");
  background-size: 300% 300%;
  background-repeat: no-repeat;

  /* чтобы не было мыла */
  background-position: center;
}


.icon-add        { background-position:   0%   0%; }   /* + */
.icon-subtract   { background-position:  45%   0%; }   /* - */
.icon-numbers    { background-position: 100%   0%; }   /* 123 */

.icon-multiply   { background-position:   0%  45%; }   /* × */
.icon-divide     { background-position:  45%  45%; }   /* ÷ */
.icon-units      { background-position: 100%  50%; }   /* линейка */


.icon-calculator { background-position:   0% 100%; }   /* калькулятор */
.icon-formula    { background-position:  45% 100%; }   /* a+b=? */
.icon-notebook   { background-position: 100% 100%; }   /* тетрадь */

.icon {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}





.main-icon {
  width: 200px;
  height: 200px;

  background-image: url("/static/icons/main.png");
  background-repeat: no-repeat;

  /* масштаб всего sprite */
  background-size: 600px 181px;

  margin: 0 auto;
}

/* шаг = ширина одной иконки = 200px */
.icon-thinking {
  background-position: 0 0;
}

.icon-loop {
  background-position: -200px 0;
}

.icon-progress {
  background-position: -405px 0;
}


/* ===== BASE ===== */
.icon-unit {
  width: 56px;
  height: 56px;

  background-image: url("/static/icons/units.png");
  background-size: 200% 200%;
  background-repeat: no-repeat;

  background-position: center;

  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

/* ===== POSITIONS ===== */

/* Длина — линейка */
.icon-unit-length {
  background-position: 0% 0%;
}

/* Масса — весы */
.icon-unit-mass {
  background-position: 100% 0%;
}

/* Время — часы */
.icon-unit-time {
  background-position: 0% 100%;
}

/* Объём — мерный стакан */
.icon-unit-volume {
  background-position: 100% 100%;
}




.icon-clocks {
  width: 56px;
  height: 56px;

  background-image: url("/static/icons/clocks.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;

  background-position: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}


.icon-clocks-time {
  background-position: 0% 50%;
}


.icon-clocks-clock-analog {
  background-position: 50% 50%;
}


.icon-clocks-calendar {
  background-position: 100% 50%;
}