.ribbon-card {
  z-index: -1;
  position: relative;
}
.ribbon-folded {
  --fold: 0.6rem;
  --padding: 3.6rem;
  --color: #ebb134;
  --fontcolor: #fff;
  --fontsize: 1.5rem;
  position: relative;
}
.ribbon-folded::before {
  position: absolute;
  border: 0.2rem solid transparent;
  padding: 0 var(--padding) calc(var(--fold));
  background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--fold) no-repeat var(--color);
  background-clip: padding-box;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--fold)) calc(100% - var(--fold)), var(--fold) calc(100% - var(--fold)), 0 100%);
  content: attr(ribbon-data);
  color: var(--fontcolor);
  font-size: var(--fontsize);
  -webkit-mask:
    linear-gradient(135deg, transparent calc(50% - var(--fold) * 0.707), #fff 0) bottom left,
    linear-gradient(-135deg, transparent calc(50% - var(--fold) * 0.707), #fff 0) bottom right;
  -webkit-mask-size: 300vmax 300vmax;
  -webkit-mask-composite: destination-in, xor;
  mask-composite: intersect;
}
.ribbon-folded-top-left::before {
  top: 0;
  left: 0;
  transform: translate(-29.2893%, -100%) rotate(-45deg);
  transform-origin: bottom right;
}
.ribbon-folded-top-right::before {
  top: 0;
  right: 0;
  transform: translate(29.2893%, -100%) rotate(45deg);
  transform-origin: bottom left;
}
.ribbon-wrapper-outside {
  overflow-x: clip;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.ribbon-wrapper-outside {
  overflow-x: unset;
}
}