.product-hero {
  --theme-hsl: var(--navy-hsl);
  position: relative;
  padding-bottom: var(--s2);

  &__wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    @include wrapper;
    @media (min-width: 800px) { flex-direction: row; }
  }

  &__content {
    flex: 1;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: left;
    align-self: center;
    @media (min-width: 800px) { padding-right: 16px; }
    p { font-weight: 300; }
    a:not([class]) { @include link; }
  }

  &__image {
    flex: 1;
    > img { max-width: 100%; }
    @media (max-width: 800px) { order: -1; }
  }
  
  &__heading {
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 600;
    color: hsla(var(--theme-hsl), 1);

    @include breakpoint($large) { 
      font-size: 2.5rem;
      line-height: 1.1;
      letter-spacing: 1.08px;
    }
  }

  &__subheading {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 300;
    @include breakpoint($large) { margin-top: var(--s2); }

    @include breakpoint($large) { 
      font-size: 1.6rem;
      letter-spacing: 0.48px;
    }
  }

  .button { 
    --button-hsl: var(--theme-hsl);
    @include breakpoint($large) { 
      margin-top: var(--s2); 
      align-self: baseline;
    }
  }
}

.product-hero--website,
.product-hero--video {
  overflow: hidden;

  .product-hero__image > img {
    box-shadow: 4px 4px 8px hsla(var(--black--hsl), .15);
    
    @include breakpoint($large) {
      max-width: 150%;
      width: 150%;
    }
  }
}

.product-hero--democracy { 
  --theme-hsl: var(--green-hsl); 
}

.product-hero--future-leadership {
  --theme-hsl: var(--red-hsl);
}

.product-hero--politics-society {
  --theme-hsl: var(--yellow-hsl);
}

.product-hero--digital-world {
  --theme-hsl: var(--purple-hsl);
}