.reward-app-download-wrapper{
  background: var(--tertiary-light-grey);
}

.reward-app-download {
  background-color: var(--tertiary-black);
  color: var(--tertiary-white);
  overflow: hidden;
  clip-path: polygon(calc(60% - 20px) 16px, calc(60% - 6px) 0, 100% 0, 100% 100%, 0 100%, 0 16px);

  .reward-app-download-container {
    margin: 3.5rem 0 0;
    padding-bottom: 2.5rem;
    @media (width >= 1024px) {
      margin: 5rem 0 0;
      padding: 0;
    }
  }

  /* Hero Section */
  .hero-section {
    .g-row {
      flex-direction: column;

      @media (width >= 1024px) {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
      }
    }

    .hero-content {
      display: flex;
      flex-direction: column;

      @media (width >= 1024px) {
        justify-content: center;
      }

      .hero-title {
        color: var(--tertiary-white);
        font-family: var(--body-heading-font-family);
        font-size: var(--body-font-size-xl);
        font-weight: var(--fw-500);
        line-height: var(--heading-lh-11-mob-display);
        margin: 0;
        letter-spacing: 0.64px;

        @media (width >= 1024px) {
          font-size: var(--heading-font-9-mob);
          line-height: var(--heading-lh-19-des-display);
          letter-spacing: 0.96px;
        }
      }

      .hero-image-mobile {
        display: block;
        margin: 3rem 0 1.5rem;

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

        img {
          width: 100%;
        }
      }

      .hero-description {
        color: var(--tertiary-light-grey);
        font-size: var(--body-font-size-xxs);
        font-weight: var(--fw-300);
        line-height: var(--heading-lh-4--mob-text-medium);
        margin: 0;

        @media (width >= 1024px) {
          color: var(--tertiary-white);
          font-size: var(--body-font-size-s);
          line-height: var(--heading-lh-10-des);
          margin: 2.25rem 0 4.125rem;
        }

        p {
          margin: 0;
        }
      }

      .cta-download-wrapper {
        display: flex;
        flex-direction: column;
        margin: 2rem 0 0;

        @media (width >= 1024px) {
          flex-direction: row;
          gap: 2.5rem;
          margin: 0;
        }

        .cta-primary {
          order: 2;
          margin: 1.5rem 0 0;

          @media (width >= 1024px) {
            order: 1;
            margin: 0;
            text-wrap: nowrap;
          }
          &::after {
            content: none;
            display: none;
          }
        }
      }

      .download-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
        order: 1;

        @media (width >= 1024px) {
          margin: 0;
          order: 2;
        }

        .download-text {
          color: var(--tertiary-white);
          font-family: var(--font-primary-nexa);
          font-size: 12px;
          font-weight: var(--fw-500);
          line-height: var(--heading-lh-6-des);

          @media (width >= 1024px) {
            font-size: var(--body-font-size-xxs);
            text-wrap: nowrap;
          }
        }

        .app-store-icons {
          display: flex;
          gap: 1rem;
          align-items: center;
        }

        .download-app_btn-divider {
          width: 1px;
          height: 1.3125rem;
          border: 1px solid var(--tertiary-white);

          @media (width >= 1024px) {
            height: 1.5rem;
          }
        }

        .store-link {
          display: inline-flex;

          .store-icon {
            width: 1.5rem;
            height: 1.5rem;

            @media (width >= 1024px) {
              width: 1.75rem;
              height: 1.75rem;
            }

            &.google-play-icon {
              background: url('/icons/play-store-icon.svg') no-repeat center;
            }

            &.apple-store-icon {
              background: url('/icons/app-store-icon.svg') no-repeat center;
            }
          }
        }
      }
    }
    .hero-image-desktop {
      display: none;

      @media (width >= 1024px) {
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  /* Benefits Section */
  .benefits-section {
    margin: 4rem 0 0;

    @media (width >= 1024px) {
      padding: 0 0 4rem;
      margin: 7.5rem 0 0;
    }

    .benefits-title {
      color: var(--tertiary-white);
      font-family: var(--body-heading-font-family);
      font-size: var(--body-font-size-x);
      font-weight: var(--fw-500);
      line-height: var(--heading-lh-15-des);
      margin: 0 0 2rem;
      letter-spacing: 0.48px;

      @media (width >= 1024px) {
        font-size: var(--heading-font-18-des);
        line-height: var(--heading-lh-5-des-display);
        margin: 0 0 3rem;
        padding: 0 4rem;
        letter-spacing: 0.6px;
      }
    }

    .reward-cards-container {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      @media (width >= 1024px) {
        flex-direction: row;
        padding: 0 4rem;
      }

      .reward-card {
        background: var(--gradient-6);
        padding: 1rem;

        @media (width >= 1024px) {
          flex: 1;
        }

        .reward-card-number {
          color: var(--tertiary-white);
          font-family: var(--font-primary-nexa);
          font-size: var(--body-font-size-sm);
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-21-des-text-small);
          display: inline-block;
          margin: 0 0.75rem 0 0;
          letter-spacing: 0.4px;
          font-style: italic;

          @media (width >= 1024px) {
            font-size: var(--body-font-size-m);
            margin: 0 0.625rem 0 0;
            letter-spacing: 0.44px;
          }
        }

        .reward-card-title {
          color: var(--tertiary-white);
          font-family: var(--body-heading-font-family);
          font-size: var(--body-font-size-s);
          font-weight: var(--fw-500);
          line-height: var(--heading-lh-17-des-text-medium);
          margin: 0 0 1rem;
          display: inline-block;
          letter-spacing: 0.36px;

          @media (width >= 1024px) {
            font-size: var(--body-font-size-sm);
            line-height: var(--heading-lh-10-des);
            margin: 0 0 1.5rem;
            letter-spacing: 0.4px;
          }
        }

        .reward-card-bullets {
          color: var(--tertiary-light-grey);
          font-size: var(--body-font-size-xxs);
          font-weight: var(--fw-300);
          line-height: var(--heading-lh-6-des);
          padding: 0 0 0 1rem;

          @media (width >= 1024px) {
            font-size: var(--body-font-size-xs);
          }
        }
      }
    }
  }
}