section.divider {
  width: 100%;
  position: relative;
  z-index: 9;
  height: 50px;
}
section.divider.footer-divider {
  position: absolute;
  --svg-fill: var(--color-primary-10);
}
@media (min-width: 767px) {
  section.divider {
    height: 80px;
  }
}
section.divider.overlap-top {
  margin-top: -50px;
}
@media (min-width: 767px) {
  section.divider.overlap-top {
    margin-top: -80px;
  }
}
section.divider.overlap-bottom {
  margin-bottom: -80px;
}
@media (min-width: 767px) {
  section.divider.overlap-bottom {
    margin-bottom: -80px;
  }
}
section.divider.fill-white {
  --svg-fill: var(--color-white);
}
section.divider.fill-primary-light {
  --svg-fill: var(--color-primary-light) ;
}
section.divider.fill-primary {
  --svg-fill: var(--color-primary) ;
}
section.divider.fill-primary-dark {
  --svg-fill: var(--color-primary-dark) ;
}
section.divider.fill-secondary {
  --svg-fill: var(--color-secondary) ;
}
section.divider.fill-gray {
  --svg-fill: var(--color-gray-light) ;
}
section.divider.fill-sand {
  --svg-fill: var(--color-sand) ;
}
section.divider.fill-sand-light {
  --svg-fill: var(--color-sand-light) ;
}
section.divider.fill-green {
  --svg-fill: var(--color-green) ;
}
section.divider.fill-black {
  --svg-fill: var(--color-black) ;
}
section.divider svg {
  width: 100%;
  height: auto;
  max-height: 50px;
  grid-column: 1/-1;
  margin-block: -1px;
}
@media (min-width: 767px) {
  section.divider svg {
    max-height: 80px;
  }
}
section.divider svg path {
  fill: var(--svg-fill);
}
section.divider.flip-vertical {
  transform: scaleY(-1);
}
section.divider.flip-horizontal {
  transform: scaleX(-1);
}
section.divider.flip-vertical.flip-horizontal {
  transform: scale(-1);
}