.accent {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background-color: var(--_bg-color, var(--accent));
  isolation: isolate;
  border-radius: 10px;
}
@media (min-width: 1200px) {
  .accent {
    padding: 60px 36px;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .accent {
    padding: 36px;
  }
}
@media (max-width: 739.98px) {
  .accent {
    padding: 14px;
  }
}
.accent::before, .accent::after {
  position: absolute;
  z-index: -1;
  aspect-ratio: 256/105;
  pointer-events: none;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 256 105'%3E%3Cg fill='%23fff' opacity='.2'%3E%3Cpath d='M92.49 105H52.91L0 52.5 52.9 0h39.6L39.6 52.5 92.5 105Z'/%3E%3Cpath d='M147 105h-39.6L54.5 52.5 107.4 0h39.58L94.1 52.5 147 105Z'/%3E%3Cpath d='M201.5 105h-39.6L109 52.5 161.9 0h39.59l-52.91 52.5 52.9 52.5Z'/%3E%3Cpath d='M256 105h-39.58L163.5 52.5 216.41 0H256l-52.9 52.5L256 105Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
@media (min-width: 740px) {
  .accent::before, .accent::after {
    --position-x: -30px;
    --position-y: -20px;
    width: 256px;
  }
}
@media (max-width: 739.98px) {
  .accent::before, .accent::after {
    --position-x: -10px;
    --position-y: -10px;
    width: 125px;
  }
}
.accent::before {
  top: var(--position-y);
  right: var(--position-x);
}
.accent::after {
  bottom: var(--position-y);
  left: var(--position-x);
  transform: scaleX(-1);
}
.accent--secondary {
  --_bg-color: var(--red-400);
}