/* Download app section */
.download-app {
  position: relative;
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-text-default-color);
  background: url("../../images/background/bg1_full.png") center/cover no-repeat;
  overflow: hidden;
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px; 
  padding-right: 16px;
}

/* Background block with default color so transparent image of download-app wont be mixed with other bg images */
.download-app-background-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-bg-default-color); 
  z-index: -4; 
}

.download-app-container {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.download-app-image img {
  margin-top: 8px;
  max-width: 100%;
  height: auto;
  display: block;
}

.download-app-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-app-content .download-app-title {
  color: var(--text-text-default-color);
  font-size: 32px;
  font-weight: 550;
  line-height: 100%;
  margin: 0 0 16px 0;
}

.download-app-text {
  color: var(--text-text-secondary-color);
  margin: 0;
}

.download-app-content .primary-btn {
  color: var(--text-text-onbrand-color);
  width: 100%;
  max-width: var(--btn-width);
  margin-top: 24px;
}

/* Tablet */
@media (min-width: 768px) {
  .download-app {
    grid-column: 1 / -1; 
    position: relative;
    overflow: hidden;
    background-size: 640px 579px;
    background-position-y: -10px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 24px;
    margin-left: -40px;
    margin-right: -40px;
    padding-left: 40px; 
    padding-right: 40px;
  }

  .download-app-container {
    grid-column: 2 / 8;
    margin: 0;
    text-align: center;
    gap: 32px;
  }

  .download-app-text-content {
    padding: 0 90px;
  }

  .download-app-content .primary-btn {
    margin-top: 32px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .download-app {
    margin-left: -104px;
    margin-right: -104px;
    padding-left: 104px; 
    padding-right: 104px;
  }

  .download-app-container {
    grid-column: 1 / -1;
  }

  .download-app-content {
    justify-items: center;
    width: 100%;
  }

  .download-app-content .download-app-title {
    font-size: 40px;
  }

  .download-app-text-content {
    padding: 0;
  }

  .download-app-image img {
    max-width: 590px;
  }

  .download-app-content .primary-btn {
    max-width: var(--btn-l-width);
    height: var(--btn-l-height);
    border-radius: var(--btn-l-radius);
  }
}

/* Desktop+ */
@media (min-width: 1440px) {
  .download-app {
    margin-left: -164px;
    margin-right: -164px;
    padding-left: 164px; 
    padding-right: 164px;
    background-size: 110% 520px;
    background-position: 60% 100px;
  }
}