body, .vw-copyright, .vw-copyright > * , h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
}

header a {
  display: block;
  margin: 25px 0 20px;
  line-height: 0;
}

header img {
  width: 268px;
}

.main-content {
  background: url("images/map.png") no-repeat center/cover;
  
  --logo-width: 360px;
  --download-from-apple-img-height: 54.21px;
  --download-from-google-img-height: 54.38px;
  --cta-gap: 16.23px;
  --app-preview-width: 305px;
  --gap-between-promotion-items: 27px;
  --wrapper-width: 360px;
  --gap-between-promotion-and-app-preview: 16px;
  --top-gap: 36px;
  --bottom-gap: 16px; 
}

.main-content {
  padding: var(--top-gap) 0 var(--bottom-gap);
}

.main-content .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-between-promotion-and-app-preview);
  
  max-width: var(--wrapper-width);
  
  margin: 0 auto;
}

.main-content .promotion {
  display: flex;
  flex-direction: column;
  gap:  var(--gap-between-promotion-items);
  align-items: center;
}

.main-content .logo {
  width: 100%;
  max-width: var(--logo-width);
}

.main-content .description {
  margin: 0;
  padding: 0;

  color: black;
  
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 26px;
  text-align: center;
}

.main-content .cta-buttons {
  display: flex;
  gap: var(--cta-gap);
}

.main-content .download-from-apple-link img{
  height: var(--download-from-apple-img-height);
}

.main-content .download-from-google-link img {
  height: var(--download-from-google-img-height);
}

.main-content .preview img {
  width: 100%;
  max-width: var(--app-preview-width);
}

@media (min-width: 768px) {
  .main-content {
    --logo-width: 430.103px;
    --download-from-apple-img-height: 66.791px;
    --download-from-google-img-height: 67px;
    --cta-gap: 20px;
    --app-preview-width: 375px;
    --wrapper-width: 663px;
    --gap-between-promotion-and-app-preview: 23px;
    --top-gap: 44px;
    --bottom-gap: 24.38px; 
  }

  .main-content .description {
    font-size: 30px;
    line-height: 38px;
  }
}

@media (min-width: 1204px) {
  .main-content {
    --app-preview-width: 510px;
    --wrapper-width: 1203px;
    --gap-between-promotion-and-app-preview: 30px;
    --top-gap: 59px;
    --bottom-gap: 58.62px; 
  }

  .main-content .wrapper {
    flex-direction: row;
  }

  .main-content .promotion {
    align-items: flex-start;
    
    width: 663px;
  }

  .main-content .description {
    font-size: 40px;
    line-height: 49px;
    text-align: start;

    margin: 1px 0 17px;
  }
}