.download-app {
  padding: var(--spacing-big) var(--container-margin);

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

.bg-container {
  position: relative;
}

.download-app__bg {
  --bg-top: var(--spacing-30);
  --bg-bottom: 0px;

  border-bottom: var(--shape-border-width-4) solid var(--primary-color);
  height: calc(100% - var(--bg-top) - var(--bg-bottom));
  left: 0;
  position: absolute;
  top: var(--bg-top);
  width: 100%;
  z-index: -1;

  @media (width>=768px) {
    --bg-bottom: var(--spacing-30);
    --bg-top: var(--spacing-18);
  }

  @media (width>=1024px) {
    --bg-bottom: 36px;
    --bg-top: 39px;
  }

  .download-app__bg-overlay {
    background: var(--bg-img-mobile) lightgray -0.268px 0 / 235.223% 132.353%;
    background-size: contain;
    height: 100%;
    opacity: 0.2;
    width: 100%;

    @media (width>= 768px) {
      background: var(--ui-gray-light-header);
      opacity: 1;
    }

    @media (width>=1024px) {
      background-image: var(--bg-img);
      opacity: 0.2;
    }
  }
}

.download-app__container {
  align-items: center;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-medium);
  padding: 0 var(--sizing-m);

  @media (width>=768px) {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--spacing-medium);
  }

  @media (width>=1024px) {
    padding: 0 var(--spacing-xbig);
  }

  .download-app__left {
    .download-app__content {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xsmall);

      @media (width>768px) {
        gap: var(--spacing-xs);
      }

      @media (width>1024px) {
        gap: var(--spacing-2xs);
      }
    }

    .download-app__title,
    .download-app__title * {
      color: var(--neutrals-sub-texts-paragraphs);
      font-feature-settings: var(--font-settings);
      font-size: var(--fs-large);
      font-style: normal;
      font-weight: var(--fw-400);
      line-height: var(--lh-normal);
      text-align: center;

      @media (width>=768px) {
        font-size: var(--fs-xmedium);
        text-align: left;
      }

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

    .download-app__description,
    .download-app__description * {
      color: var(--neutrals-sub-texts-paragraphs);
      font-feature-settings: var(--font-settings);
      font-size: var(--fs-xxsmall);
      font-style: normal;
      font-weight: var(--fw-300);
      line-height: var(--lh-normal);
      text-align: center;

      @media (width>=768px) {
        color: var(--neutrals-sub-texts-grey);
        font-size: var(--fs-xsmall);
        font-style: normal;
        font-weight: var(--fw-400);
        letter-spacing: -0.18px;
        line-height: var(--lh-17);
        text-align: left;
      }

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

    .download-option .download-option-container {
      align-items: center;
      gap: 0;
      padding-bottom: 34px;
      padding-top: var(--spacing-medium);

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

      @media (width>=768px) {
        padding-bottom: var(--spacing-medium);
        padding-top: var(--spacing-medium);
      }

      .download-option__links {
        gap: var(--spacing-xs);

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

        .download-option__button {
          background: var(--neutrals-sub-texts-paragraphs);
          border: 0.75px solid var(--neutrals-unfilled-inactive);
          border-radius: 4.5px;

          img {
            border-radius: 4.5px;
          }
        }
      }
    }
  }

  .download-app__right {
    display: flex;
    justify-content: center;

    @media (width>=768px) {
      justify-content: flex-end;
    }
  }

  .download-app__image {
    height: auto;
    width: 191px;

    @media (width>=768px) {
      width: 180px;
    }

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