/* 3-farbiger Border-Verlauf (90° / linear) */
.sto-border-gradient-3 {
  --c1: #dc5c82;
  --c2: #dceb3c;
  --c3: #87d2d7;
  --bw: 1px;

  /* Corner-Radii */
  --r-tl: 0px;
  --r-tr: 0px;
  --r-br: 0px;
  --r-bl: 0px;

  position: relative;
  background: transparent;

  border-radius:
    var(--r-tl)
    var(--r-tr)
    var(--r-br)
    var(--r-bl);
}

.sto-border-gradient-3::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--bw);

  border-radius:
    var(--r-tl)
    var(--r-tr)
    var(--r-br)
    var(--r-bl);

  background: linear-gradient(
    90deg,
    var(--c1) 0%,
    var(--c2) 50%,
    var(--c3) 100%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}

.sto-border-gradient--rtop-10 {
  --r-tl: 10px;
  --r-tr: 10px;
}

.sto-border-gradient--rtop-20 {
  --r-tl: 20px;
  --r-tr: 20px;
}

.sto-border-gradient--rtop-30 {
  --r-tl: 30px;
  --r-tr: 30px;
}