.small-spacing{
  height: 2rem;
}

.illustration {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

/*purple background*/
.main-banner {
  width: 100%;
  background: var(--spectrum-700);
  max-height: 44.5rem;
  margin: 0px;
  padding: 0;
}

/*text banner*/
.main-banner .header-content {
  height: auto !important;
  /*margin-bottom: 4rem !important;*/
  max-width: 1265px !important;
  height: 36.25rem;
  flex-direction: column;
  font-family: Montserrat;
  padding: 64px 0;
}

.subtitle {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 800;
  font-size: 40px;
  line-height: 120%;
  /* identical to box height, or 48px */
  text-align: center;
  letter-spacing: -0.02em;
  /* Grey/000 */
  color: #FFFFFF;
}

.time-to-read span {
  padding-left: 8px;
}

.time-to-read {
  /* Caption/🖥 Desktop */
  font-family: var(--body-font-family);
  font-size: var(--caption-font-size);
  line-height: var(--headline-2-font-size);
  letter-spacing: var(--footnote-letter-spacing);
  color: var(--spectrum-200);
 /*padding: 4px 16px;*/
}

/*title page*/
.main-title h1 {
/* Display2/🖥 Desktop */
  font-family: var(--display-1-font-family);
  font-weight: var(--display-1-font-weight);
  font-size: var(--display-2-font-size);
  color: var(--grey-000);
  letter-spacing: var(--headline-4-letter-spacing);
  /* Inside Auto Layout */
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
  margin: 0px 0px;
}

.main-title {
  background-repeat: no-repeat;
     background-position : center;
}

.main-title, .introduction {
  z-index: 2;
}

.main-title img,
.main-title {
  width: 1265px;
  height: 230px;
}

/* header paragraph */
.introduction p {
  font-family: var(--body-font-family);
  font-weight: var(--display-1-font-weight);
  font-size: var(--headline-3-font-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--footnote-letter-spacing);
  color: var(--grey-000);
  /* Inside Auto Layout */
  flex: none;
  order: 4;
  flex-grow: 0;
  margin: 0px 0px;
}

.introduction p.headline-2 {
  /* Headline 2/🖥 Desktop */
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 800;
  font-size: 40px;
  line-height: 120%;
  /* identical to box height, or 48px */
  text-align: center;
  letter-spacing: -0.02em;
  /* Grey/000 */
  color: #FFFFFF;
}

/* big picture under banner*/
.main-image {
  background: #E84698;
  width: 100%;
  text-align: center;
  height: auto;
  max-height: 488px;
}

 
@media screen and (max-width: 992px){
    .main-title h1 {
      font-size: 3.5rem;
    }  
  .introduction,
  .subtitle {
    width: 90%;
  }
   .introduction p {
    margin: 0 2.5rem;
   }
  .main-banner .header-content {
    margin-top: 2rem;
  }
  .main-title,
  .main-title img {
    width: 900px;
    max-width: 100%;
    height: 240px;
  }
  .subtitle {
    /* Headline 2/💻 Tablet */
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 800;
    font-size: 32px;
    line-height: 120%;
    /* or 38px */
    text-align: center;
    letter-spacing: -0.02em;
    /* Grey/000 */
    color: #FFFFFF;
  }
  .introduction p {
    /* Headline 4/🖥 Desktop */
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    /* or 28px */
    text-align: center;
    letter-spacing: -0.014em;
    /* Grey/000 */
    color: #FFFFFF;
    }
    .main-banner {
      padding-top: 2rem;
      margin-top: 4rem;
  }
}

 @media screen and (max-width: 768px){ 
    main {
    padding: 2rem 24px 3rem !important;
   }
   .main-banner .header-content {
    /*  padding: 0 24px !important;*/
     width: 100%;
   }
   .introduction {
     margin: 0rem 0 4rem;
   }
   .subtitle {
    text-align: left;
    font-size: 28px; 
   }
   .introduction p {
     text-align: left;
    /* Headline 4/📱 Mobile */
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    /* or 25px */
    letter-spacing: -0.014em;
    /* Grey/000 */
    color: #FFFFFF;

   }
   .main-title img,
   .main-title {
    width: 740px;*/
    margin-bottom: 32px;
    height: 146px;
   }
   .introduction p {
      margin: 0;
   }
   .time-to-read {
    margin-top: 4rem;
   }
}

@media screen and (max-width: 540px){
   .main-title {
    height: 110px;
  }
  .main-banner {
    margin-top: 0;
  }
  .main-banner .header-content {
    margin-bottom: 0 !important;
  }
}