.lp-content
  position: relative
  .lp-content__inner
    display: flex
  +media-breakpoint-up(lg)
    padding-top: 4rem
    padding-bottom: 4rem
  +media-breakpoint-only(md)
    padding-top: 2.5rem
    padding-bottom: 2.5rem
  +media-breakpoint-down(sm)
    padding-top: 2rem
    padding-bottom: 2rem
  &.is-campaign
    background-color: var(--main)
    padding-top: 1.5rem
    padding-bottom: 4rem
    color: var(--reversal-text)
  &.is-lp-bg-1
    background-color: var(--lp-bg-1)
  &.is-lp-bg-2
    background-color: var(--lp-bg-2)
  &.is-lp-bg-3
    background-color: var(--lp-bg-3)
  &.is-lp-bg-main
    background-color: var(--main)
    color: var(--reversal-text)

  &.is-hero
    position: relative
    +media-breakpoint-up(md)
      padding-top: 3rem
      padding-bottom: 4rem
    +media-breakpoint-down(sm)
      padding-top: 2rem
      padding-bottom: 3rem
    .lp-content__inner
      +media-breakpoint-up(md)
        flex-direction: row
        align-items: center
        gap: 3.5rem
      +media-breakpoint-down(sm)
        flex-direction: column
        gap: 1rem
    .lp-content__start
      +media-breakpoint-up(xl)
        flex: 14
      +media-breakpoint-only(lg)
        flex: 14
      +media-breakpoint-only(md)
        flex: 14
    .lp-content__end
      +media-breakpoint-up(xl)
        flex: 10
      +media-breakpoint-only(lg)
        flex: 8
      +media-breakpoint-only(md)
        flex: 6
    .lp-hero-info
      height: 100%
      display: flex
      flex-direction: column
      justify-content: center
      +media-breakpoint-up(md)
        gap: 2rem
      +media-breakpoint-down(sm)
        gap: 1rem

  +media-breakpoint-up(xl)
    &.is-top-title
      .lp-content__inner
        gap: 3.5rem
        flex-direction: column

    &.is-right-title
      .lp-content__inner
        flex-direction: row-reverse
        justify-content: space-between
        gap: 3rem
      .lp-content__end
        flex: 1
        max-width: 50rem

    &.is-left-title
      .lp-content__inner
        gap: 3rem
        justify-content: space-between
      .lp-content__end
        flex: 1
        max-width: 42.5rem

  .lp-content__inner
    +media-breakpoint-down(lg)
      flex-direction: column
    +media-breakpoint-only(lg)
      gap: 3.5rem
    +media-breakpoint-only(md)
      gap: 2.5rem
    +media-breakpoint-down(sm)
      gap: 2rem

.lp-content__body
  display: flex
  flex-direction: column
  gap: 2.5rem
