/* stylelint-disable order/order */
/* stylelint-enable order/order */
/*
 * Fonts
 *
 * The font settings are defined via the gulp figma task creates variables in the css/__base-includes/figma/_figma-font-styles.scss file based on the Figma file. Additional variables are defined here.
 */
/*
 * Colors
 *
 * The primary colors are defined via the gulp figma task creates variables in the css/__base-includes/figma/_figma-color-variables.scss file based on the Figma file. Additional variables are defined here.
 */
/*
 * Effects
 */
/*
 * Grid Settings
 */
/*
This file can be used for optional additions to the Figma-generated font style mixins in the figma/_figma-font-styles.scss file.

For example, if you want to add styles to the @overline mixin, just create a mixin here called @overline-custom and that CSS will be added to the primary mixin:

@mixin overline-custom() {
	font-weight: 700;
}
*/
.block-program-taxonomy-hero {
  position: relative;
  z-index: 1;
  display: block;
  padding: clamp(6.75rem, 4.1785714286rem + 5.3571428571vw, 9rem) 0 clamp(6rem, 2.5714285714rem + 7.1428571429vw, 9rem);
  background-color: var(--bgColor, #86ddf3);
}
@media (max-width: 47.98rem) {
  .block-program-taxonomy-hero::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 4.125rem;
    background-color: var(--heroColor, #00c0de);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%);
  }
}
.block-program-taxonomy-hero + .block-program-cards-grid {
  padding-top: 3rem;
}
.block-program-taxonomy-hero .hero-text-angle {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 52%;
  height: 100%;
}
@media (max-width: 47.98rem) {
  .block-program-taxonomy-hero .hero-text-angle {
    display: none;
  }
}
.block-program-taxonomy-hero .hero-text-angle__bg {
  fill: var(--heroColor, #00c0de);
}
.block-program-taxonomy-hero .hero-text-angle__line {
  display: none;
}
@media (max-width: 47.98rem) {
  .block-program-taxonomy-hero__wrapper .col-12 {
    flex: auto;
    width: 100%;
  }
  .block-program-taxonomy-hero__wrapper .col-12:first-of-type:not(:last-child) {
    margin-bottom: 1rem;
  }
}
.block-program-taxonomy-hero__title {
  --margin-top: 0;
}
.block-program-taxonomy-hero .wp-block-columns .wp-block-column:first-of-type h1 {
  --margin-top: 0;
  position: relative;
  padding-bottom: 0;
}
.block-program-taxonomy-hero .wp-block-columns .wp-block-column:first-of-type h1::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 5.125rem;
  height: 0.25rem;
  background-color: var(--heroColor, #00c0de);
  clip-path: polygon(5% 0%, 100% 0, 95% 100%, 0% 100%);
}
@media (max-width: 47.98rem) {
  .block-program-taxonomy-hero .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    margin-bottom: 1rem;
  }
  .block-program-taxonomy-hero .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:last-child {
    margin-bottom: 0;
  }
}
.block-program-taxonomy-hero + h1, .block-program-taxonomy-hero + h2, .block-program-taxonomy-hero + h3, .block-program-taxonomy-hero + h4, .block-program-taxonomy-hero + h5, .block-program-taxonomy-hero + h6, .block-program-taxonomy-hero + p, .block-program-taxonomy-hero + :not(section) {
  margin-top: clamp(6rem, 4.2857142857rem + 3.5714285714vw, 7.5rem);
}
.block-program-taxonomy-hero.text-white .block-program-taxonomy-hero__wrapper {
  color: #fff;
}