.legacy-planning-section {
  /* padding: 80px 0; */
  background: rgba(var(--bg-color-6));

  .legacy-planning-card {
    background: rgba(var(--bg-color-1));
    box-shadow: 0 40px 90px 0 rgba(var(--bg-color-2), 35%);
    border-radius: var(--border-radius-10);
    padding: 80px;
    display: flex;
    align-items: center;
    gap: 68px;

    &.legacy-planning-card--reverse {
      flex-direction: row-reverse;
    }

    .legacy-planning-card__image {
      overflow: hidden;
      border-radius: var(--border-radius-13);
      width: 41%;

      .legacy-card__image {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 7 / 8;
        object-fit: cover;
      }
    }

    .legacy-planning-card__content {
      width: 53%;

      .legacy-planning-card__heading {
        font-family: var(--font-source-serif-4);
        font-size: var(--font-11);
        color: rgba(var(--text-color-5));
        letter-spacing: var(--letter-spacing-7);
        margin-bottom: 29px;
        font-weight: 700;
      }

      .legacy-planning-card__des {
        font-size: var(--font-24);
        line-height: 1.75;
        color: rgba(var(--text-color-9));

        &:last-of-type {
          margin-bottom: 68px;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    .legacy-planning-card {
      flex-direction: column !important;
      gap: 48px;
      padding: 50px;
      align-items: flex-start;

      .legacy-planning-card__content {
        width: 100%;
      }
    }
  }

  @media (max-width: 680px) {
    .legacy-planning-card {
      flex-direction: column;
      gap: 24px;
      padding: 24px;

      .legacy-planning-card__image {
        width: 100%;
      }

      .legacy-planning-card__content {
        width: 100%;

        .legacy-planning-card__heading {
          margin-bottom: 16px;
        }

        .legacy-planning-card__des {
          &:last-of-type {
            margin-bottom: 48px;
          }
        }
      }
    }
  }
}

.light_legacy-planning-section {
  background: rgba(var(--bg-color-26));

  .legacy-planning-card {
    background: rgba(var(--bg-color-6)) !important;
    box-shadow: none !important;
  }

  .legacy-planning-card__content {
    .legacy-planning-card__heading {
      color: rgba(var(--text-color-1)) !important;
    }

    .legacy-planning-card__des {
      color: rgba(var(--text-color-22)) !important;
    }

    .site__btn--3 {
      background: rgba(var(--bg-color-10));
      color: rgba(var(--text-color-1));
    }
  }
}