/* Пять оформлений карты. Выбирает бизнес — вид у всех его клиентов
   один: это его фирменная карта, а не обои по вкусу владельца.

   Каждое оформление — фон и приметный цвет, взятый из самой волны
   на нём. Больше здесь ничего: устройство лица одно на все пять
   (card-face.css), и расходиться им незачем.

   Снимки лежат в assets/img/cards: полноразмерный для лица и мелкий
   для плитки выбора — грузить стокилобайтный фон в превью размером
   с ноготь незачем. */

.cardface--gold {
  background-image: url("../../img/cards/gold.jpg");
  --card-accent: var(--card-gold);
}

.cardface--sapphire {
  background-image: url("../../img/cards/sapphire.jpg");
  --card-accent: var(--card-sapphire);
}

.cardface--night {
  background-image: url("../../img/cards/night.jpg");
  --card-accent: var(--card-night);
}

.cardface--platinum {
  background-image: url("../../img/cards/platinum.jpg");
  --card-accent: var(--card-platinum);
}

.cardface--steel {
  background-image: url("../../img/cards/steel.jpg");
  --card-accent: var(--card-steel);
}

/* Три оформления по роду занятий: кофейня, автосервис, зал. Это снимки,
   а не отвлечённые волны, и потому они притушены на пятую часть ещё
   при подготовке файла — на светлом кадре не читается ни код, ни имя,
   а вуаль под текстом одна на все восемь. */
.cardface--coffee {
  background-image: url("../../img/cards/coffee.jpg");
  --card-accent: var(--card-coffee);
}

.cardface--garage {
  background-image: url("../../img/cards/garage.jpg");
  --card-accent: var(--card-garage);
}

.cardface--gym {
  background-image: url("../../img/cards/gym.jpg");
  --card-accent: var(--card-gym);
}

/* Обложки в ленте выбора: те же снимки, только мелкие. Полноразмерный
   фон в плитку размером с ноготь грузить незачем — восемь лиц сразу
   стоили бы почти мегабайта. */
.styletile__face--gold { background-image: url("../../img/cards/gold-small.jpg"); }
.styletile__face--sapphire { background-image: url("../../img/cards/sapphire-small.jpg"); }
.styletile__face--night { background-image: url("../../img/cards/night-small.jpg"); }
.styletile__face--platinum { background-image: url("../../img/cards/platinum-small.jpg"); }
.styletile__face--steel { background-image: url("../../img/cards/steel-small.jpg"); }
.styletile__face--coffee { background-image: url("../../img/cards/coffee-small.jpg"); }
.styletile__face--garage { background-image: url("../../img/cards/garage-small.jpg"); }
.styletile__face--gym { background-image: url("../../img/cards/gym-small.jpg"); }