.marketing-layout {
  &--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));
    padding-left: var(--wds-marketing-layout-padding-right-tiny, var(--wds-space-700, 28px));
    padding-right: var(--wds-marketing-layout-padding-right-tiny, var(--wds-space-700, 28px));
  }

  &--direction-vertical#{&}--size-small,
  &--direction-vertical#{&}--size-medium {
    padding-top: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-600, 24px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-600, 24px));
    padding-left: var(--wds-marketing-layout-padding-right-small, var(--wds-space-700, 28px));
    padding-right: var(--wds-marketing-layout-padding-right-small, var(--wds-space-700, 28px));
  }

  &__content-wrapper--size-tiny#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-left-tiny, var(--wds-space-600, 24px));
    padding-right: var(--wds-marketing-layout-padding-right-tiny, var(--wds-space-700, 28px));
  }

  &__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-left: var(--wds-marketing-layout-padding-right-tiny, var(--wds-space-700, 28px));
    padding-right: var(--wds-marketing-layout-padding-left-tiny, var(--wds-space-600, 24px));
  }

  &__content-wrapper--size-small#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-left-small, var(--wds-space-600, 24px));
    padding-right: var(--wds-marketing-layout-padding-right-small, var(--wds-space-700, 28px));
  }

  &__content-wrapper--size-small {
    padding-top: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-600, 24px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-600, 24px));
    padding-left: var(--wds-marketing-layout-padding-right-small, var(--wds-space-700, 28px));
    padding-right: var(--wds-marketing-layout-padding-left-small, var(--wds-space-600, 24px));
  }

  &__content-wrapper--size-medium#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-right-medium, var(--wds-space-1000, 40px));
    padding-right: var(--wds-marketing-layout-padding-left-medium, var(--wds-space-1200, 48px));
  }

  &__content-wrapper--size-medium {
    padding-top: var(--wds-marketing-layout-padding-vertical-medium, var(--wds-space-600, 24px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-medium, var(--wds-space-600, 24px));
    padding-left: var(--wds-marketing-layout-padding-left-medium, var(--wds-space-1200, 48px));
    padding-right: var(--wds-marketing-layout-padding-right-medium, var(--wds-space-1000, 40px));
  }

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

  &--image-padding &__image-wrapper--size-tiny {
    padding-top: var(--wds-marketing-layout-image-padding-vertical-tiny, var(--wds-space-500, 20px));
    padding-bottom: var(--wds-marketing-layout-image-padding-vertical-tiny, var(--wds-space-500, 20px));
    padding-left: var(--wds-marketing-layout-image-padding-left-tiny, var(--wds-space-600, 24px));
    padding-right: var(--wds-marketing-layout-image-padding-right-tiny, var(--wds-space-700, 28px));
  }

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

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

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

  &--image-padding &__image-wrapper--size-medium {
    padding: var(--wds-marketing-layout-image-padding-vertical-medium, var(--wds-space-600, 24px)) var(--wds-marketing-layout-image-padding-right-medium, var(--wds-space-1000, 40px));
  }

  /*
   * `image-padding + direction-vertical` has to land after every `image-wrapper
   * --size-*` padding rule — same ordering constraint as the base sheet — but
   * the size rules just moved into this bundle, which loads after the base
   * sheet entirely, while this hug-padding token doesn't diverge here.
   * Repeated verbatim so it still wins inside this theme too.
   */
  &--image-padding#{&}--direction-vertical &__image-wrapper {
    padding: var(--wds-marketing-layout-image-hug-padding, var(--wds-space-0, 0px));
  }

  /*
   * `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;
  }
}