[data-component-id="bcsao_mercury:bcsao-hero"] {
  --bcsao-hero-media-width: 40%;
  --bcsao-hero-media-fit: cover;
  --bcsao-hero-media-object-position: top;
  --bcsao-hero-media-max-height: 590px;
  --bcsao-hero-border-overlay-image: url("mask-border.svg");

  .bcsao-hero__content-band {
    padding: 4rem 1rem;
    color: white;
  }

  .bcsao-hero__media {
    display: none;
  }

  .bcsao-hero__content {
    max-width: 48rem;
  }

  h1 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 2vw + 1rem, 3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--primary-foreground);
  }

  .bcsao-hero__supporting-text {
    margin-top: 1rem;
    max-width: 42rem;
    font-size: clamp(1.125rem, 0.9821rem + 0.3571vw, 1.25rem);
    line-height: 1.6;
    color: var(--primary-foreground);
    opacity: 0.85;
  }

  .bcsao-hero__media-image-wrap {
    position: relative;
    height: 100%;
    overflow: hidden;
    clip-path: polygon(14% 8%, 100% 0, 100% 100%, 0 100%);
  }

  .bcsao-hero__media-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bcsao-hero-border-overlay-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
    z-index: 2;
  }

  .bcsao-hero__media-image {
    width: 100%;
    height: 100%;
    object-fit: var(--bcsao-hero-media-fit);
    object-position: var(--bcsao-hero-media-object-position);
    display: block;
  }

  @media (min-width: 768px) {
    .bcsao-hero__inner {
      display: flex;
      align-items: stretch;
    }

    .bcsao-hero__content-band {
      flex: 1 1 auto;
      align-content: center;
    }

    .bcsao-hero__media {
      container-type: inline-size;
      display: block;
      position: relative;
      flex: 0 0 var(--bcsao-hero-media-width);
      width: var(--bcsao-hero-media-width);
      overflow: visible;
      padding-block-start: 1rem;
    }

    .bcsao-hero__media-image-wrap {
      min-height: 100%;
      max-height: var(--bcsao-hero-media-max-height);
    }
  }

  @media (min-width: 1280px) {
    .bcsao-hero__media-image-wrap {
      border-right: 2.25cqw solid #ffffff;
    }
  }

}