.smart-emi {
  display: flex;
  flex-direction: column;
  gap: var(--sizing-xl);
  box-sizing: border-box;
  padding-block: var(--spacing-medium);

  @media (width >= 768px) {
    flex-direction: row;
    padding: var(--spacing-big) var(--sizing-l);
    gap: 18px;
  }

  @media (width >= 1024px) {
    padding: 50px var(--container-margin);
    gap: var(--grid-gutter-width);
  }

  .smart-emi__left {
    .smart-emi__video {
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 1 / 1;
    }
  }

  .smart-emi__right {
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .smart-emi__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding-bottom: var(--spacing-xs);
      border-bottom: 1px solid var(--border-color);

      @media (width >= 768px) {
        align-items: flex-end;
        padding-bottom: var(--sizing-m);
      }

      @media (width >= 1024px) {
        align-items: flex-end;
        padding-bottom: 24px;
      }

      .smart-emi__title {
        color: var(--neutrals-sub-texts-paragraphs);
        font-feature-settings: var(--font-settings);
        font-size: var(--fs-large);
        font-weight: var(--fw-400);
        line-height: var(--lh-large);

        @media (width >= 768px) {
          font-size: var(--fs-xslarge);
          font-weight: var(--fw-400);
          line-height: normal;
        }

        @media (width >= 1024px) {
          font-size: var(--fs-xxlarge);
          line-height: var(--lh-xxlarge);
          font-weight: var(--fw-400);
        }
      }

      .smart-emi__ctalink {
        font-feature-settings: var(--font-settings);
        color: var(--primary-color);
        font-size: var(--fs-small);
        font-weight: var(--fw-400);
        text-decoration: none;
        line-height: var(--lh-small);
        white-space: nowrap;

        @media (width >= 768px) {
          font-size: var(--fs-medium);
          font-weight: var(--fw-500);
          line-height: var(--lh-small);
          text-decoration: underline;
        }

        @media (width >= 1024px) {
          line-height: var(--lh-small);
          font-size: var(--fs-medium);
        }
      }
    }

    .accordion {
      .accordion__item {
        .accordion__question {
          .accordion__text {
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            span {
              color: var(--texts-paragraphs);
              font-size: var(--fs-small);
              font-weight: var(--fw-400);
              line-height: var(--lh-medium);

              @media (width >= 1024px) {
                font-size: 2.6rem;
                line-height: 2.8rem;
              }
            }
          }
        }

        .accordion__answer {
          a {
            color: var(--primary-color);

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}

/* Variant: With description */
.smart-emi--with-desc {
  gap: 24px;

  @media (width >= 768px) {
    padding-block: 29px 21px;
    gap: 17px;
  }

  @media (width >= 1024px) {
    padding-block: 50px;
    flex-direction: row;
    gap: var(--grid-gutter-width);
  }

  .smart-emi__right {
    @media (width >= 768px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0;
    }

    .smart-emi__header {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      gap: var(--grid-gutter-width);
      padding: 0;
      border-bottom: none;

      @media (width >= 768px) {
        padding-bottom: 0;
        gap: 13px;
      }

      @media (width >= 1024px) {
        gap: var(--grid-gutter-width);
      }

      .smart-emi__title {
        height: auto;
        word-break: break-word;
        color: var(--schemes-on-surface);
        font-size: var(--fs-xxlarge);
        font-weight: var(--fw-400);
        line-height: var(--lh-xxlarge);

        @media (width >= 768px) {
          color: var(--neutrals-sub-texts-paragraphs);
          font-size: var(--fs-xlarge);
          font-weight: var(--fw-600);
          line-height: 2.7rem;
        }

        @media (width >= 1024px) {
          font-size: 4.8rem;
          font-weight: var(--fw-400);
          line-height: var(--lh-xxxlarge);
        }
      }

      .smart-emi__description {
        color: var(--neutrals-sub-texts-paragraphs);
        font-size: var(--fs-small);
        font-weight: var(--fw-400);
        line-height: var(--lh-medium);

        @media (width >= 768px) {
          font-size: 1.1rem;
          line-height: var(--line-height-body-low);
        }

        @media (width >= 1024px) {
          font-size: var(--fs-medium);
          line-height: var(--lh-large);
        }
      }
    }
  }
}