/* Общий вид «экранной» картинки подарка. Размеры в cqw — от ширины самой панели (.pane), поэтому она масштабируется сама. */
.pane {
  position: relative;
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 9cqw;
  overflow: hidden;
  background: #08070d;
  text-align: left;
  color: var(--text);
}
.pane::before { /* LED-точки */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0.8px, transparent 1.4px);
  background-size: 5px 5px;
}
.pane::after { /* градиентный уголок */
  content: ""; position: absolute; top: 0; right: 0; width: 18cqw; height: 18cqw; pointer-events: none;
  background: linear-gradient(135deg, var(--pink), var(--violet) 50%, var(--blue));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.pane-a { background: radial-gradient(120% 90% at 85% 10%, rgba(143, 124, 242, 0.55), transparent 60%), #08070d; }
.pane-b { background: radial-gradient(120% 90% at 15% 90%, rgba(242, 122, 217, 0.5), transparent 60%), #08070d; }
.pane > * { position: relative; }
.pane-title { font: 900 22cqw/0.9 var(--display); letter-spacing: -0.04em; text-transform: uppercase; color: #fff; text-shadow: 0 0 6cqw rgba(143, 124, 242, 0.55); }
.pane-sub { margin-top: 4cqw; font: italic 400 8cqw/1.1 var(--serif); color: var(--pink); }