$heading-1-line-height: var(
  --wds-font-line-height-heading-1,
  var(--wsr-heading-line-height-xl, 36px)
);
$heading-1-font-weight: var(
  --wds-font-weight-heading-1,
  var(--wsr-font-weight-bold, 700)
);
$body-medium-font-size: var(
  --wds-font-size-body-medium,
  var(--wsr-text-font-size-medium, 16px)
);
$body-medium-line-height: var(
  --wds-font-line-height-body-medium,
  var(--wsr-text-line-height-medium, 24px)
);

.marketing-page-layout-content {
  &__overline-divider-container {
    width: 36px;
    margin: var(--wds-marketing-page-overline-divider-margin-top, 17px) 0
      var(
        --wds-marketing-page-overline-title-gap,
        var(--wds-space-200, 12px)
      )
      0;
  }

  &__overline-divider-container > * {
    display: var(--wds-marketing-page-overline-divider-display, block);
  }

  /*
   * The title is a `Heading` and the content a `Text`, so these overrides keep
   * the doubled root class — the (0,4,0) the Stylable state class gave them —
   * to beat the hubs' own typography.
   */
  &#{&}--size-large &__title-container &__title {
    line-height: var(
      --wds-marketing-page-title-line-height,
      #{$heading-1-line-height}
    );
    font-weight: var(
      --wds-marketing-page-title-font-weight,
      #{$heading-1-font-weight}
    );
  }

  & &__subtitle-container &__subtitle {
    color: var(
      --wds-marketing-page-subtitle-fill,
      var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
    );
  }

  &#{&}--layout-image-top#{&}--size-large
    &__title-container
    &__title {
    line-height: var(
      --wds-marketing-page-image-top-title-line-height,
      #{$heading-1-line-height}
    );
  }

  &--layout-image-side-end &__content-box {
    margin-top: var(--wds-marketing-page-title-content-gap, var(--wds-space-400, 24px));
  }

  &#{&}--size-large &__content-box &__content {
    font-size: var(
      --wds-marketing-page-content-font-size,
      #{$body-medium-font-size}
    );
    line-height: var(
      --wds-marketing-page-content-line-height,
      #{$body-medium-line-height}
    );
  }

  &--layout-image-side-end:not(#{&}--mobile) &__actions-container {
    margin-top: var(--wds-marketing-page-content-actions-gap, var(--wds-space-700, 42px));
  }

  &--layout-image-top {
    display: flex;
    align-items: flex-start;
    gap: var(--wds-marketing-page-image-top-columns-gap, 40px);
  }

  &__text-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  &--layout-image-top &__subtitle-container {
    margin-top: var(--wds-marketing-page-image-top-title-subtitle-gap, 16px);
  }

  &--layout-image-top &__actions-container {
    margin-top: var(--wds-marketing-page-image-top-actions-gap, 38px);
  }

  &__content-column {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding-top: var(
      --wds-marketing-page-image-top-content-column-padding-vertical,
      6px
    );
    padding-bottom: var(
      --wds-marketing-page-image-top-content-column-padding-vertical,
      6px
    );
  }

  &--layout-image-top#{&}--mobile {
    flex-direction: column;
    align-items: stretch;
  }
}