/* Prova fotografica delle schede App. Per tornare allo stile precedente basta
   rimuovere il collegamento a questo file da index.html. */
.app-card {
  isolation: isolate;
  color: #fff;
  background-color: #10242c;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-shadow: 0 1px 18px rgb(0 0 0 / .35);
}

.app-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(4 17 23 / .94) 0%, rgb(4 17 23 / .79) 48%, rgb(4 17 23 / .30) 100%);
  transition: background .35s ease;
}

.app-card:hover::before {
  background: linear-gradient(90deg, rgb(4 17 23 / .90) 0%, rgb(4 17 23 / .70) 45%, rgb(4 17 23 / .19) 100%);
}

.app-card > * { position: relative; z-index: 1; }
.app-card .card-number,
.app-card .card-copy p,
.app-card .card-copy span { color: #fff; opacity: .84; }
.app-card .app-icon { box-shadow: 0 16px 42px rgb(0 0 0 / .42); }

.metro-card {
  background-image: url("app-card-backgrounds/metro-ritmo.jpg");
  background-position: 62% center;
}
.irhythm-card {
  background-image: url("app-card-backgrounds/irhythm-random.jpg");
  background-position: 62% center;
}
.imelody-card {
  background-image: url("app-card-backgrounds/imelody-random.jpg");
  background-position: 62% center;
}
.iharmony-card {
  background-image: url("app-card-backgrounds/iharmony-random.jpg");
  background-position: 62% center;
}
.iguitar-card {
  background-image: url("app-card-backgrounds/irhythm-guitar.jpg");
  background-position: 66% center;
}

.irhythm-card::before { background: linear-gradient(90deg, rgb(72 38 1 / .95), rgb(118 61 2 / .73) 50%, rgb(118 61 2 / .20)); }
.imelody-card::before { background: linear-gradient(90deg, rgb(4 49 65 / .94), rgb(11 88 112 / .70) 50%, rgb(11 88 112 / .18)); }
.iharmony-card::before { background: linear-gradient(90deg, rgb(48 15 66 / .95), rgb(101 36 133 / .72) 50%, rgb(101 36 133 / .18)); }
.iguitar-card::before { background: linear-gradient(90deg, rgb(54 12 15 / .95), rgb(126 45 50 / .72) 48%, rgb(126 45 50 / .16)); }

@media (max-width: 800px) {
  .app-card { background-position: 68% center; }
  .app-card::before,
  .app-card:hover::before {
    background: linear-gradient(0deg, rgb(5 16 21 / .96) 0%, rgb(5 16 21 / .78) 58%, rgb(5 16 21 / .38) 100%);
  }
}