/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-hero {
  /**
    @prop --hero-padding-top:
      Top padding of hero container
      - default: 0
  */
  --hero-padding-top: 0;
  /**
    @prop --hero-padding-bottom:
      Bottom padding of hero container
      - default: 0
  */
  --hero-padding-bottom: 0;
  --hero-breadcrumb-gap: 2rem;
  --hero-pre-heading-gap: 0;
  --hero-bg-color: var(--go-color-primary-100);
  --hero-fg-color: var(--go-color-darkest);
  --hero-text-flex-basis: 60%;
  --hero-image-flex-basis: 40%;
  --hero-container-gap: 2rem;
  /**
    @prop --hero-text-bg-blur-on-img:
      Blur effect for hero text when `full-width-bg` slot is used.
      - default: 10px
  */
  --hero-text-bg-blur-on-img: 0.625rem;
  /**
    @prop --hero-text-box-padding:
      Padding on hero text
      - default: 2rem
  */
  --hero-text-box-padding: 2rem;
  /**
    @prop --hero-img-aspect-ratio:
      Aspect ratio of hero image (e.g. 16/9 or 4/3)
      - default: 4/3
  */
  --hero-img-aspect-ratio: 4/3;
  /**
    @prop --hero-img-fit:
      object-fit for image (e.g. cover/contain/etc)
      - default: cover
  */
  --hero-img-fit: cover;
  /**
    @prop --hero-img-position:
      object-position for hero image
      - default: center
  */
  --hero-img-position: center;
  /**
    @prop --hero-full-width-bg-padding:
      Padding for outer hero section (from go-hero top to text box top) when `full-width-bg` is slotted
      - default: 4rem 0
  */
  --hero-full-width-bg-padding: 4rem 0;
  /**
    @prop --hero-bg-opacity-on-img:
      Opacity of background on hero text box when `full-width-bg` is slotted
      - default: 0.5
  */
  --hero-bg-opacity-on-img: 0.5;
  display: block;
  background-color: var(--hero-bg-color);
  color: var(--hero-fg-color);
  position: relative;
  overflow: hidden;
}
go-hero .full-width-bg {
  position: absolute;
  z-index: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
go-hero .full-width-bg > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
go-hero.has-full-width-bg .hero-container {
  padding: var(--hero-full-width-bg-padding);
}
go-hero.has-full-width-bg .hero-text {
  position: relative;
  -webkit-backdrop-filter: blur(var(--hero-text-bg-blur-on-img));
          backdrop-filter: blur(var(--hero-text-bg-blur-on-img));
}
go-hero.has-full-width-bg .hero-text-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--hero-bg-color);
  opacity: var(--hero-bg-opacity-on-img);
}
go-hero.hide-img-on-mobile .hero-image {
  display: none;
}
@media (min-width: 1024px) {
  go-hero.hide-img-on-mobile .hero-image {
    display: block;
  }
}
go-hero .hero-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--hero-padding-top);
  padding-bottom: var(--hero-padding-bottom);
  gap: var(--hero-container-gap);
}
@media (min-width: 1024px) {
  go-hero .hero-container {
    flex-direction: row;
  }
}
go-hero .hero-text {
  padding: var(--hero-text-box-padding);
}
go-hero .hero-text go-breadcrumbs {
  margin-bottom: var(--hero-breadcrumb-gap);
}
go-hero .hero-text .pre-heading {
  margin-bottom: var(--hero-pre-heading-gap);
}
@media (min-width: 1024px) {
  go-hero .hero-text {
    flex: 0 1 var(--hero-text-flex-basis);
  }
}
@media (min-width: 1024px) {
  go-hero .hero-image {
    flex: 0 1 var(--hero-image-flex-basis);
  }
}
go-hero .hero-image .featured-img {
  width: 100%;
  height: 100%;
  object-fit: var(--hero-img-fit);
  object-position: var(--hero-img-position);
  aspect-ratio: var(--hero-img-aspect-ratio);
}