/* Both strips are present from the start. Only their text moves. */
.ss-v9 .ribbons {
  --ribbon-center: calc(72px + 4.375vw);
  --ribbon-height: 58px;
  --ribbon-gap: 30px;
  --seam-offset: 6px;
  /* Account for both diagonal ends at wide desktop sizes. */
  height: max(270px, calc(136px + 8.75vw));
}
.ss-v9 .ribbon {
  height: var(--ribbon-height);
  line-height: 1.35;
}
.ss-v9 .ribbon-a {
  top: calc(var(--ribbon-center) - var(--ribbon-height) / 2);
  transform: rotate(-5deg);
}
.ss-v9 .ribbon-b {
  top: calc(var(--ribbon-center) - var(--ribbon-height) / 2 - var(--ribbon-gap));
  transform: rotate(5deg);
}
.ss-v9 .ribbons::before {
  /* The paper/dark seam stays beneath the green strip at every width. */
  clip-path: polygon(0 0, 100% 0,
    100% calc(var(--ribbon-center) + var(--seam-offset) - 4.375vw),
    0 calc(var(--ribbon-center) + var(--seam-offset) + 4.375vw));
}
@media (max-width: 800px) {
  .ss-v9 .ribbons {
    --ribbon-center: calc(76px + 4.375vw);
    --ribbon-height: 43px;
    --ribbon-gap: 19px;
    --seam-offset: 2.5px;
    height: 185px;
  }
}