Responsive Retrofit of Stripe’s Atlas Site

@media (max-width: 1000px) {

  html:root {
      min-width: 100%;
  }
  
  .block, .inner-col {
      width: 90%;
      margin-left: 5%;
  }
  
  header#main-header ul.external {
      position: relative;
      margin-top: 1em
  }
  
  #main-content header h1 {
      width: 90% !important;
  }
  
  #pillars li {
      width: 100% !important;
  }
  
  
  #stories .story {
      display: block !important;
  }
  #stories .story .content {
      width: 90% !important;
      float: left;
      margin: 5%;
  }
  
  #stories .story .media {
      margin-left: 10%;
      width: 80% !important;
      margin-bottom: 2em;
  }
  
  #stories .story .media iframe {
      width: 98%;
  }
  
  #mini-faq li, #mini-faq ul {
      display: block !important;
      width: 80%;
      padding-left: 10%;
  }
  
  #mini-faq li:nth-child(2) {
      border-width: 0px !important;
      padding: 3em 0 3em 10% !important;
      
  }
  
  #main-content .content {
      width: 45%;
      margin-left: 5%;
  }

}


/* had to add this wrapper to get an intrinsic ratio */
div#motive-wrapper {
   position: relative;
   width: 50%; 
}
#motivation .illustration {
    width: auto;
    height: auto;
    padding-bottom: 100%;
}