.marketing-layout {
  &--size-small {
    --wds-internal-marketing-layout-badge-padding: var(--wds-marketing-layout-badge-offset-small, var(--wds-space-0, 0px));
  }

  &--size-medium {
    --wds-internal-marketing-layout-badge-padding: var(--wds-marketing-layout-badge-offset-medium, var(--wds-space-0, 0px));
  }

  &--size-tiny {
    --wds-internal-marketing-layout-badge-padding: var(--wds-marketing-layout-badge-offset-tiny, var(--wds-space-0, 0px));
  }

  &--direction-horizontal#{&}--size-tiny {
    min-height: var(--wds-marketing-layout-min-height-tiny, 140px);
  }

  &--direction-horizontal#{&}--size-small {
    min-height: var(--wds-marketing-layout-min-height-small, 160px);
  }

  &--direction-horizontal#{&}--size-medium {
    min-height: var(--wds-marketing-layout-min-height-medium, 180px);
  }

  &--direction-vertical#{&}--size-tiny {
    padding-top: var(--wds-marketing-layout-padding-vertical-tiny, var(--wds-space-500, 20px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-tiny, var(--wds-space-500, 20px));
  }

  &--direction-vertical#{&}--size-small,
  &--direction-vertical#{&}--size-medium {
    padding-top: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-500, 20px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-500, 20px));
  }

  &__content-container {
    justify-content: var(--wds-marketing-layout-content-justify, flex-start);
  }

  &__content-wrapper--size-tiny#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-left-tiny, var(--wds-space-200, 8px));
  }

  &__content-wrapper--size-tiny {
    padding-top: var(--wds-marketing-layout-padding-vertical-tiny, var(--wds-space-500, 20px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-tiny, var(--wds-space-500, 20px));
    padding-right: var(--wds-marketing-layout-padding-left-tiny, var(--wds-space-200, 8px));
  }

  &__content-wrapper--size-small#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-left-small, var(--wds-space-200, 8px));
  }

  &__content-wrapper--size-small {
    padding-top: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-500, 20px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-500, 20px));
    padding-right: var(--wds-marketing-layout-padding-left-small, var(--wds-space-200, 8px));
  }

  &__content-wrapper--size-medium#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-right-medium, var(--wds-space-200, 8px));
    padding-right: var(--wds-marketing-layout-padding-left-medium, var(--wds-space-500, 20px));
  }

  &__content-wrapper--size-medium {
    padding-top: var(--wds-marketing-layout-padding-vertical-medium, var(--wds-space-500, 20px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-medium, var(--wds-space-500, 20px));
    padding-left: var(--wds-marketing-layout-padding-left-medium, var(--wds-space-500, 20px));
    padding-right: var(--wds-marketing-layout-padding-right-medium, var(--wds-space-200, 8px));
  }

  &--inverted#{&}--direction-horizontal &__actions-container {
    align-self: var(--wds-marketing-layout-actions-alignment-inverted, flex-end);
  }

  &__title {
    padding-bottom: var(--wds-marketing-layout-title-gap-medium, var(--wds-space-100, 4px));
  }

  &--size-tiny &__title {
    font-size: var(--wds-marketing-layout-title-font-size-tiny, var(--wds-font-size-heading-3, 16px));
    line-height: var(--wds-marketing-layout-title-line-height-tiny, var(--wds-space-500, 20px));
    font-weight: var(--wds-marketing-layout-title-font-weight-tiny, var(--wds-font-weight-heading-3, 700));
    font-family: var(--wds-marketing-layout-title-font-family-tiny, var(--wds-font-family-display, "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif));
    letter-spacing: var(--wds-marketing-layout-title-letter-spacing-tiny, var(--wds-font-letter-spacing-heading-3, -0.5px));
    padding-bottom: var(--wds-marketing-layout-title-gap-tiny, var(--wds-space-50, 2px));
  }

  &#{&}--size-small &__title &__title-heading {
    line-height: var(--wds-marketing-layout-title-line-height-small, var(--wds-space-500, 20px));
  }

  &#{&}--size-medium &__title &__title-heading {
    font-size: var(--wds-marketing-layout-title-font-size-medium, var(--wds-font-size-heading-3, 16px));
    line-height: var(--wds-marketing-layout-title-line-height-medium, var(--wds-space-500, 20px));
    font-weight: var(--wds-marketing-layout-title-font-weight-medium, var(--wds-font-weight-heading-3, 700));
  }

  &#{&}--size-tiny &__description &__description-text {
    font-size: var(--wds-marketing-layout-description-font-size-tiny, var(--wds-font-size-body-tiny, 12px));
    line-height: var(--wds-marketing-layout-description-line-height-tiny, var(--wds-font-line-height-body-tiny, 16px));
    font-weight: var(--wds-marketing-layout-description-font-weight-tiny, var(--wds-font-weight-medium, 500));
    color: var(--wds-marketing-layout-description-color, var(--wds-color-black-300, #525150));
  }

  &#{&}--size-small &__description &__description-text {
    font-size: var(--wds-marketing-layout-description-font-size-small, var(--wds-font-size-body-tiny, 12px));
    line-height: var(--wds-marketing-layout-description-line-height-small, var(--wds-font-line-height-body-tiny, 16px));
    font-weight: var(--wds-marketing-layout-description-font-weight-small, var(--wds-font-weight-medium, 500));
    color: var(--wds-marketing-layout-description-color, var(--wds-color-black-300, #525150));
  }

  &#{&}--size-medium &__description &__description-text {
    font-size: var(--wds-marketing-layout-description-font-size-medium, var(--wds-font-size-body-tiny, 12px));
    line-height: var(--wds-marketing-layout-description-line-height-medium, var(--wds-font-line-height-body-tiny, 16px));
    font-weight: var(--wds-marketing-layout-description-font-weight-medium, var(--wds-font-weight-medium, 500));
    color: var(--wds-marketing-layout-description-color, var(--wds-color-black-300, #525150));
  }

  &__description {
    max-width: var(--wds-marketing-layout-description-max-width, 80%);
  }

  &--with-actions &__description {
    padding-bottom: var(--wds-marketing-layout-actions-gap-medium, var(--wds-space-600, 24px));
  }

  &--size-small#{&}--with-actions &__description {
    padding-bottom: var(--wds-marketing-layout-actions-gap-small, var(--wds-space-600, 24px));
  }

  &__badge {
    position: var(--wds-marketing-layout-badge-position, static);
    top: var(--wds-marketing-layout-badge-top, auto);
    left: var(--wds-marketing-layout-badge-side, auto);
    margin-bottom: var(--wds-marketing-layout-badge-gap, var(--wds-space-200, 8px));
  }

  :global(.rtl) &__badge,
  :global([dir="rtl"]) &--inverted &__badge {
    right: var(--wds-marketing-layout-badge-side, auto);
  }

  &__image {
    border-radius: var(--wds-marketing-layout-image-border-radius, var(--wds-border-radius-400, 8px));
  }

  &--direction-horizontal &__image-background--url-image {
    flex: var(--wds-marketing-layout-image-wrapper-flex, none);
    aspect-ratio: var(--wds-marketing-layout-image-aspect-ratio, 1);
    contain: var(--wds-marketing-layout-image-wrapper-contain, size);
  }

  &--direction-horizontal#{&}--size-tiny &__image-background--url-image {
    min-width: var(--wds-marketing-layout-min-height-tiny, 140px);
  }

  &--direction-horizontal#{&}--size-small &__image-background--url-image {
    min-width: var(--wds-marketing-layout-min-height-small, 160px);
  }

  &--direction-horizontal#{&}--size-medium &__image-background--url-image {
    min-width: var(--wds-marketing-layout-min-height-medium, 180px);
  }

  &--direction-horizontal &__image-wrapper--url-image &__image {
    height: var(--wds-marketing-layout-image-height, 100%);
    width: var(--wds-marketing-layout-image-width, auto);
    aspect-ratio: var(--wds-marketing-layout-image-aspect-ratio, 1);
    object-fit: var(--wds-marketing-layout-image-object-fit, cover);
  }

  &--direction-horizontal#{&}--size-tiny &__image-wrapper--url-image &__image {
    max-width: var(--wds-marketing-layout-image-max-width-tiny, 116px);
  }

  &--direction-horizontal#{&}--size-small &__image-wrapper--url-image &__image {
    max-width: var(--wds-marketing-layout-image-max-width-small, 136px);
  }

  &--direction-horizontal#{&}--size-medium &__image-wrapper--url-image &__image {
    max-width: var(--wds-marketing-layout-image-max-width-medium, 156px);
  }

  &--image-padding &__image-wrapper#{&}__image-wrapper--size-tiny#{&}__image-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-image-padding-right-tiny, var(--wds-space-300, 12px));
    padding-right: var(--wds-marketing-layout-image-padding-left-tiny, var(--wds-space-300, 12px));
  }

  &--image-padding &__image-wrapper--size-tiny {
    padding-top: var(--wds-marketing-layout-image-padding-vertical-tiny, var(--wds-space-300, 12px));
    padding-bottom: var(--wds-marketing-layout-image-padding-vertical-tiny, var(--wds-space-300, 12px));
    padding-left: var(--wds-marketing-layout-image-padding-left-tiny, var(--wds-space-300, 12px));
    padding-right: var(--wds-marketing-layout-image-padding-right-tiny, var(--wds-space-300, 12px));
  }

  &--image-padding &__image-wrapper#{&}__image-wrapper--size-small#{&}__image-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-image-padding-right-small, var(--wds-space-300, 12px));
    padding-right: var(--wds-marketing-layout-image-padding-left-small, var(--wds-space-300, 12px));
  }

  &--image-padding &__image-wrapper--size-small {
    padding-top: var(--wds-marketing-layout-image-padding-vertical-small, var(--wds-space-300, 12px));
    padding-bottom: var(--wds-marketing-layout-image-padding-vertical-small, var(--wds-space-300, 12px));
    padding-left: var(--wds-marketing-layout-image-padding-left-small, var(--wds-space-300, 12px));
    padding-right: var(--wds-marketing-layout-image-padding-right-small, var(--wds-space-300, 12px));
  }

  &--image-padding &__image-wrapper#{&}__image-wrapper--size-medium#{&}__image-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-image-padding-right-medium, var(--wds-space-300, 12px));
    padding-right: var(--wds-marketing-layout-image-padding-right-medium, var(--wds-space-300, 12px));
  }

  &--image-padding &__image-wrapper--size-medium {
    padding: var(--wds-marketing-layout-image-padding-vertical-medium, var(--wds-space-300, 12px)) var(--wds-marketing-layout-image-padding-right-medium, var(--wds-space-300, 12px));
  }

  &--image-padding#{&}--direction-vertical &__image-wrapper {
    padding: var(--wds-marketing-layout-image-hug-padding, var(--wds-space-300, 12px));
  }

  &--direction-horizontal:not(#{&}--image-padding) &__image-wrapper {
    padding: var(--wds-marketing-layout-image-hug-padding, var(--wds-space-300, 12px));
  }

  &--direction-vertical:not(#{&}--image-padding) &__image-wrapper {
    padding: var(--wds-marketing-layout-image-hug-padding, var(--wds-space-300, 12px));
  }

  /*
   * `content-wrapper--direction-vertical` ties every `content-wrapper --size-*`
   * padding rule above at one class and wins by order — same constraint as the
   * base sheet — but the size rules just moved into this bundle, which loads
   * after the base sheet entirely, while this reset carries no token at all.
   * Repeated verbatim so it still wins the tie inside this theme too.
   */
  &__content-wrapper--direction-vertical {
    padding: 0px;
  }
}