.bip-svp-hero {
  margin-left: calc(var(--svp-site-container-padding-mobile) * -1);
  margin-right: calc(var(--svp-site-container-padding-mobile) * -1);
  margin-bottom: 3em;
}

@media (min-width: 1024px) {
  .bip-svp-hero {
    margin-left: calc(var(--svp-site-container-padding-desktop) * -1);
    margin-right: calc(var(--svp-site-container-padding-desktop) * -1);
  }
}

.bip-svp-hero--primary {
  position: relative;
}

.bip-svp-hero--primary .bip-svp-hero__body {
  position: relative;
  z-index: 2;
  max-width: var(--svp-site-max-width);
  margin: 0 auto;
  min-height: min(45vh, 600px);
  padding: 2em var(--svp-site-container-padding-mobile) 2em;
}

@media (min-width: 1024px) {
	.bip-svp-hero--primary .bip-svp-hero__body {
    padding: 2em var(--svp-site-container-padding-desktop) 2em;
  }
}

.bip-svp-hero--primary .sv-image-portlet img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 100% !important;
  max-height: 100% !important;
}

.bip-svp-hero--primary {
  background-color: var(--env-ui-color-brand-75);
}

.bip-svp-hero--primary .bip-svp-hero__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(6vw, 117px);
  align-items: center;
}

.bip-svp-hero--primary .bip-svp-hero__body h2, 
.bip-svp-hero--primary .bip-svp-hero__body h3, 
.bip-svp-hero--primary .bip-svp-hero__body p, 
.bip-svp-hero--primary .bip-svp-hero__body span {
  color: var(--env-ui-color-brand-75-contrast);
}

@media (max-width: 1024px) {
  .bip-svp-hero--primary .bip-svp-hero__body {
    display: block;
    position: static;
    min-height: 0;
    padding-bottom: 3em;
  }
}

.bip-svp-hero--primary .sv-image-portlet {
  position: absolute;
  z-index: 1;
  --svp-hero-40pct: calc((-0.2 * var(--svp-site-max-width) + 100vw) / 2);
  inset: 0 max(50%, var(--svp-hero-40pct)) 0 0;
}

@media (max-width: 1024px) {
  .bip-svp-hero--primary .sv-image-portlet {
    inset: 0;
    position: static;
    height: 40vh;
  }
}
