/* Colorful, explicitly illustrative art for local demonstration profiles that have no real media. */
.profile-demo-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 33%, var(--demo-light) 0 9%, transparent 9.5%),
    radial-gradient(ellipse at 50% 44%, var(--demo-light) 0 20%, transparent 20.5%),
    radial-gradient(ellipse at 50% 105%, var(--demo-dark) 0 42%, transparent 42.5%),
    linear-gradient(145deg, var(--demo-light), var(--demo-main) 52%, var(--demo-dark));
}
.profile-card > div.profile-demo-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 33%, var(--demo-light) 0 9%, transparent 9.5%),
    radial-gradient(ellipse at 50% 44%, var(--demo-light) 0 20%, transparent 20.5%),
    radial-gradient(ellipse at 50% 105%, var(--demo-dark) 0 42%, transparent 42.5%),
    linear-gradient(145deg, var(--demo-light), var(--demo-main) 52%, var(--demo-dark));
}
.profile-demo-art::before,
.profile-demo-art::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.profile-demo-art::before {
  inset: 8% 12%;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 48% 48% 42% 42%;
  box-shadow: 0 0 42px rgba(255,255,255,.12), inset 0 0 36px rgba(255,255,255,.08);
}
.profile-demo-art::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(8,5,14,.02) 38%, rgba(8,5,14,.22) 70%, rgba(8,5,14,.82) 100%);
}
.profile-demo-art > span {
  margin-top: -18%;
  color: rgba(255,255,255,.84);
  font-family: var(--g3-display, Georgia, serif);
  font-size: clamp(1.75rem, 4vw, 4.5rem);
  line-height: 1;
  text-shadow: 0 3px 28px rgba(0,0,0,.3);
}
.profile-demo-art--1 { --demo-light:#f5a6be; --demo-main:#a92e72; --demo-dark:#351642; }
.profile-demo-art--2 { --demo-light:#8ad7d1; --demo-main:#247c86; --demo-dark:#123344; }
.profile-demo-art--3 { --demo-light:#c1a0ff; --demo-main:#6f42b5; --demo-dark:#24153f; }
.profile-demo-art--4 { --demo-light:#ffd28a; --demo-main:#bd672f; --demo-dark:#49213a; }
.profile-demo-art--5 { --demo-light:#f4a18c; --demo-main:#c44d5a; --demo-dark:#391d43; }
.profile-demo-art--6 { --demo-light:#91b9ff; --demo-main:#4c65b4; --demo-dark:#1b2149; }
.profile-demo-art--7 { --demo-light:#c5d68d; --demo-main:#66834d; --demo-dark:#26394a; }
.profile-demo-art--8 { --demo-light:#e7a9e9; --demo-main:#914d9f; --demo-dark:#322151; }
.profile-demo-art--9 { --demo-light:#f2c485; --demo-main:#a77035; --demo-dark:#39304b; }
.profile-demo-art--10 { --demo-light:#8ed1f4; --demo-main:#397eae; --demo-dark:#24204b; }

@media (min-width: 760px) {
  .explore-page .profile-demo-art { width: 100%; height: 100%; }
}