.index-header {
  overflow: hidden;
  background: url("/images/index/mobile-bg.png") no-repeat center center / cover;
  --gap-between-app-preview-and-promo: 21.27px;
  --container-top-padding: 50.32px;
  --container-bottom-padding: 50.32px;
  --gap-between-app-promo-items: 16px;
  --app-preview-height: 294.5px;
  --logo-height: 49.4px;
  --rating-width: 232px;
  --rating-height: 23px;
  --accomplishments-height: 33.8px;
  --download-store-button-height: 50px;
  --gap-between-download-store-buttons: 4px;
}

.index-header .container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-between-app-preview-and-promo);
  align-items: center;
  padding: var(--container-top-padding) 0 var(--container-bottom-padding);
}

.index-header .app-promo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-between-app-promo-items);
  align-items: center;
}

.index-header .app-preview img {
  display: block;
  height: var(--app-preview-height);
}

.index-header .logo img {
  display: block;
  height: var(--logo-height);
}

.index-header .rating img {
  display: block;
  width: var(--rating-width);
}

.index-header.german-language .rating img {
  width: auto;
  height: var(--rating-height);
}

.index-header .accomplishments img {
  display: block;
  height: var(--accomplishments-height);
}

.index-header .sb-store-buttons {
  margin: 0;
  justify-content: normal;
  gap: var(--gap-between-download-store-buttons);
}

.index-header .sb-store-buttons a {
  margin: 0;
  width: auto;
  max-width: 100%;
}

.index-header .sb-store-buttons a img {
  height: var(--download-store-button-height);
}

@media (min-width: 768px) {

  .index-header {
    background-image: url("/images/index/tablet-bg.png");
    --gap-between-app-preview-and-promo: 24px;
    --container-top-padding: 45px;
    --container-bottom-padding: 50px;
    --gap-between-app-promo-items: 24px;
    --app-preview-height: 398.482px;
    --logo-height: 94.65px;
    --rating-width: 315px;
    --rating-height: 33.1px;
    --accomplishments-height: 42.3px;
    --download-store-button-height: 66.791px;
    --gap-between-download-store-buttons: 10px;
  }

}

@media (min-width: 1025px) {
  
  .index-header {
    background: url("/images/index/desktop-bg.png") no-repeat center center / cover;
    --gap-between-app-preview-and-promo: 16px;
    --container-top-padding: 47px;
    --container-bottom-padding: 47px;
    --app-preview-height: 531px;
    --logo-height: 92.9px;
    --download-store-button-height: 63.9px;
  }
  
  .index-header .container {
    flex-direction: row;
    justify-content: center;
  }

}