<style>

   .overview_container {
      display: flex;
      flex-direction: column;
      width: 100%;
   }
   .o_section {
      font-size: 1rem;
      margin-bottom: 3rem;
   }

   .o_prop_section, .o_app_section {
      width: 100%;
      margin-bottom: 2rem;
   }

   .o_prop_subsection {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      font-size: .875rem;
      margin-top: .75rem;
      font-weight: 500;
   }

   .o_sec_heading {
      font-size: 1.125rem;
      font-weight: 500;
      color: #000;
   }

   .o_prop_icon {
      max-width: 36px;
      max-height: 36px;
      margin: 0 .75rem;
   }

   .o_prop_name {
      line-height: 1.1;
   }
   
   .o_app_container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
   }

   .o_app_twoboxes {
      display: flex;
      flex-direction: row;
   }

   figure.o_app_figure {
      border-right: 6px solid white;
      margin: .375rem;
      position: relative;
   }

   figure.o_app_figure > img {
      width: 100%;
      max-width: 200px;
   }

   figcaption {
      background: rgba(0,0,0,.7);
      text-align: center;
      font-weight: 700;
      color: white;
      padding: .5rem 0;
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
   }

   @media only screen and (min-width: 640px) {
   
      .overview_container, .o_app_container {
         display: flex;
         flex-direction: row;
      }

      .o_prop_section {
         width: 300px;
      }
   }

   @media only screen and (min-width: 1024px) {
   
      .overview_container {
         display: flex;
         flex-direction: row;
      }

      figure.app_container {
         display: inline-block;
         width: 25%;
         margin: .5rem;
   }

}

</style>