/**
 * Banner
 */

div.bannerwrapper {
  padding: 0;
}

div.bannerwrapper > div.sfContentBlock {
  padding: 0;
}

.banner {
  --banner-background-color: var(--color-blue-400);
  position: relative;
  padding: var(--spacing-md) 0;
  background: var(--banner-background-color);
}

/**
   * Variants
   */
.banner.primary {
  --banner-background-color: var(--color-blue-50);
}
.banner.secondary {
  background: linear-gradient(
    to bottom,
    var(--color-blue-50),
    var(--color-white)
  );
  margin-bottom: 16px;
}
.banner.tertiary {
  background: linear-gradient(
    290deg,
    var(--color-green-400),
    var(--color-blue-400)
  );
}

.banner.quaternary {
  background: url("/img/hex-large.png") no-repeat top 50% right 66vw,
    url("/img/hex-large.png") no-repeat top 10% left 75vw,
    linear-gradient(290deg, var(--color-green-400), var(--color-blue-400));
  background-size: 150%, 150%, auto;
}

.banner.quinary {
  --banner-background-color: var(--color-green-100);
}

/**
  * Breakpoint (medium)
  */
@media (min-width: 768px) {
  /**
     * Angles at the bottom
     *
     * (Only visible on desktop)
     */
  .banner.angles::after {
    position: absolute;
    left: 0;
    bottom: -2.75rem;
    z-index: 1;
    content: "";
    height: 0;
    width: 0;
    border: 2.75rem solid transparent;
    border-width: 2.75rem 50vw;
    border-left-color: white;
    border-right-color: white;
    opacity: 20%;
  }

  .banner.tertiary {
    background: linear-gradient(
      to right,
      var(--color-green-400),
      var(--color-blue-400)
    );
  }

  .banner.quaternary {
    background: url("/img/hex-large.png") no-repeat top 50% right 70vw,
      url("/img/hex-large.png") no-repeat top 10% left 80vw,
      linear-gradient(to right, var(--color-green-400), var(--color-blue-400));
    background-size: auto, auto, auto;
  }

  .banner.large {
    padding: calc(var(--spacing-2xl) * 2) 0;
  }
}