@import url('../../../commons/blocks/services/ew-plan-cards/ew-plan-cards.css');
.ew-plan-cards-wrapper {
  position: relative;
  background-color: var(--secondary-gray-10);
  p,
  ul {
    margin: 0;
  }
  .ew-plan-cards {
    margin: 0;
    padding: 2.5rem 0;
    @media (width >= 1024px) {
      padding: 3.5rem 0;
    }
    .ewp-card__top {
      display: flex;
      flex-direction: column;
      padding-bottom: var(--space-24px);
      @media (width >= 1024px) {
        padding-bottom: 2.5rem;
      }
      .ewp-card__title {
        display: block;
        color: var(--secondary-black);
        font-feature-settings:
          'liga' off,
          'clig' off;
        font-weight: var(--fw-700);
        font-size: var(--heading-font-15-mob-sub-heading);
        line-height: var(--heading-lh-19-mob-text-small);
        margin: 0;
        letter-spacing: normal;
        @media (width >= 1024px) {
          font-size: var(--heading-font-1-des);
          line-height: var(--heading-lh-16-des-display);
        }
      }
    }
    .ewp-card__subheading p {
      font-size: var(--body-font-size-xxs);
      font-feature-settings:
        'liga' off,
        'clig' off;
      font-weight: var(--fw-300);
      line-height: var(--heading-lh-19-mob-display);
      letter-spacing: normal;
      @media (width >= 1024px) {
        font-weight: var(--fw-300);
        font-size: var(--body-font-size-xs);
        line-height: var(--heading-lh-6-des);
      }
    }

    .ewp-card__cta {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      background-color: unset;
      margin-right: 0;
      margin-top: 0;
      display: inline-flex;
      align-items: center;
      min-width: 6.25rem;
      padding: 0;
      align-self: start;
      @media (width >= 1024px) {
        margin-left: auto;
        align-self: stretch;
      }

      .ewp-card__cta-btn {
        height: 2.5rem;
        background-color: var(--primary-blue-700);
        color: var(--secondary-gray-20);
        font-size: var(--body-font-size-xxs);
        font-feature-settings:
          'liga' off,
          'clig' off;
        line-height: var(--heading-lh-4--mob-text-medium);
        padding: 0 var(--space-12px);
        letter-spacing: normal;
        @media (width >= 1024px) {
          font-size: var(--body-font-size-xs);
          line-height: var(--heading-lh-11-des-text-small);
          padding: var(--space-12px) var(--space-16px);
        }
        .button,
        a.button {
          padding: 0;
        }
      }
    }
    .ewp-card__cta-block {
      display: flex;
      flex-direction: column;
      gap: var(--space-16px);
      padding-top: var(--space-8px);
      @media (width >= 1024px) {
        flex-direction: row;
        padding-top: var(--space-16px);
      }
    }
    .ewp-card__cta-block--mobile {
      display: none;

      @media (width >= 1024px) {
        display: none;
      }
    }

    .ewp__items-wrapper {
      width: 100%;
      display: grid;
      gap: var(--space-16px);
      grid-template-columns: 1fr;
      @media (width >= 1024px) {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-24px);
      }

      .ewp__item {
        border: 1px solid var(--secondary-gray-200);
        position: relative;
        padding: var(--space-18px) 0 var(--space-16px) var(--space-17px);
        background: var(--tertiary-white);
        @media (width >= 1024px) {
          padding: var(--space-24px) 0 29px var(--space-24px);
        }

        .ewp__item-top {
          display: block;
          padding-bottom: var(--space-12px);
          picture,
          img {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 5.875rem;
            height: 4.313rem;
            @media (width >= 1024px) {
              height: auto;
              width: auto;
            }
          }
          @media (width >= 1024px) {
            padding-bottom: var(--space-16px);
          }
          :is(h1, h2, h3, h4, h5, h6) {
            color: var(--primary-black);
            font-size: var(--body-font-size-xs);
            font-feature-settings:
              'liga' off,
              'clig' off;
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-17-mob-text-normal);
            letter-spacing: normal;
            margin: 0;
            text-transform: uppercase;
            height: 1.438rem;
            @media (width >= 1024px) {
              color: var(--primary-black);
              font-size: var(--heading-font-7-des);
            }
          }
        }

        .ewp__item-divider {
          margin: 0;
          border: none;
          height: 1px;
          transform: scaleY(0.2);
          background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
        }

        .ewp__item-desc {
          display: flex;
          flex-direction: column;
          gap: var(--space-2px);
          margin-top: var(--space-16px);
          @media (width >= 1024px) {
            margin-top: var(--space-24px);
            gap: var(--space-8px);;
          }
          .ewp__item-desc1 p {
            color: var(--primary-black);
            font-size: var(--body-font-size-xxxs);
            font-weight: var(--fw-300);
            line-height: var(--heading-lh-21-mob-text-small);
            text-transform: uppercase;
            letter-spacing: normal;
          }

          .ewp__item-desc2 {
            p {
              color: var(--primary-black);
              font-size: var(--body-font-size-xxs);
              font-weight: var(--fw-700);
              line-height: var(--heading-lh-19-mob-display);
              letter-spacing: normal;
              @media (width >= 1024px) {
                font-size: var(--body-font-size-xs);
              }
            }
          }
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      padding: 0 1.25rem;
      @media (width >= 1024px) {
        padding: 0 3.5rem;
      }
      .sub-section {
        order: 2;
        .ew-card__subSectionTitle {
          color: var(--neutrals-sub-texts-paragraphs);
          font-size: var(--body-font-size-xs);
          font-weight: var(--fw-700);
          line-height: var(--heading-lh-19-mob-display);
          letter-spacing: normal;
          margin-top: var(--space-32px);
          margin-bottom: var(--space-24px);
          @media (width >= 1024px) {
            font-size: var(--body-font-size-l);
            line-height: var(--heading-lh-9-des-sub-heading);
            letter-spacing: normal;
            margin-top: 2.5rem;
            margin-bottom: var(--space-32px);
          }
        }
        ul {
          padding-bottom: 0;
          @media (width >= 1024px) {
            padding-bottom: 0;
          }
          .point {
            display: flex;
            flex-direction: row;
            gap: var(--space-8px);
            align-items: start;
            margin-top: var(--space-16px);
            @media (width >= 786px) {
              align-items: center;
              margin-top: var(--space-24px);
            }
            p {
              color: var(--primary-main);
              font-size: var(--heading-font-8-mob);
              font-weight: var(--fw-400);
              line-height: var(--heading-lh-6-des);
              letter-spacing: normal;
              @media (width >= 1024px) {
                line-height: var(--heading-lh-11-des-text-small);
              }
            }
            strong {
              font-weight: var(--fw-600);
              @media (width >= 1024px) {
                font-weight: var(--fw-700);
              }
            }
          }
        }
      }

      .ewp-card__disclaimer p {
        order: 1;
        font-size: var(--body-font-size-xxxs);
        font-weight: var(--fw-300);
        font-style: italic;
        line-height: var(--heading-lh-10-mob-text-small);
        letter-spacing: normal;
        margin-top: var(--space-16px);
        margin-bottom: 0;
        @media (width >= 1024px) {
          margin-top: var(--space-24px);
        }
        a {
          color: var(--primary-main);
          line-height: var(--heading-lh-21-mob-text-small);
          letter-spacing: normal;
          font-style: normal;
          font-weight: var(--fw-500);
          text-decoration-style: solid;
          text-decoration-skip-ink: auto;
          text-decoration-thickness: auto;
          text-underline-offset: auto;
          text-underline-position: from-font;
        }
      }
    }
  }
}