.gaw-has-bottom-divider {
  position: relative;
  padding-bottom: var(--divider-height);
  overflow: visible;

  &::before {
    content: "";
    background-image: var(--divider-bottom-blue);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0px 0;
    display: block;
    width: 100%;
    height: var(--divider-height);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }

  &.white-divider::before {
    background-image: var(--divider-bottom-white);
  }

  &.light-blue-divider::before {
    background-image: var(--divider-bottom-light-blue);
  }
}

.gaw-has-background-blob {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--background-blob-blue);
    background-size: 110%;
    background-position: center;
    background-repeat: no-repeat;
    /* The default blob is upside down and backwards, so we need to rotate it 180deg */
    transform: rotateX(180deg) rotateY(180deg);
  }

  @media (min-width: 1200px) {
    &::after {
      background-size: 100%;
    }
  }

  &.light-blue-blob::after {
    background-image: var(--background-blob-light-blue);
  }

  &.white-blob::after {
    background-image: var(--background-blob-white);
  }

  &.flip-blob::after {
    transform: rotateX(0deg) rotateY(0deg);
  }

  &.flip-blob-horizontal::after {
    transform: rotateX(180deg) rotateY(0deg);
  }

  &.flip-blob-vertical::after {
    transform: rotateX(0deg) rotateY(180deg);
  }
}

.gaw-has-corner-blobs {
  background: url(/wp-content/uploads/2025/06/email-signup-swoosh-left.svg);
  background-repeat: no-repeat;
  background-position: left top;

  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: url(/wp-content/uploads/2025/06/email-signup-swoosh-right.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
  }
}