title: Text disappears when resizing window
body: <p>I am taking a course and I got stuck at one of my homeworks. I am supposed to use media queries to make the site responsive and mostly it works as supposed to, but when I get to certain value, my text disappears.. It happens at window width 680px to 690px and I just have noooooo idea, why.. it should be covered by @media (max-width: 700px) statement, shouldn´t it? And my css works with all the other window widths just fine.. 
  Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/**
   * GENERAL
   */
  html {
   box-sizing: border-box;
  }
  *, *:before, *:after {
   box-sizing: inherit;
  }
  
  /* clearfix */
  .group:before,
  .group:after { content: " "; display: table; }
  .group:after { clear: both; }
  
  
  body {
   color: #2f2f2f;
   font: 0.9em/1.35em 'Avant Garde', 'Century Gothic', sans-serif;
   padding: 1.4em;
   max-width: 100%;
  }
  
  p {
   margin: 0;
  }
  
  img {
   max-width: 100%;
   height: auto;
  }
  
  .container {
   max-width: 960px;
   margin: 0 auto;
  }
  
  article {
   width: 31.25%; /*width: 300px;*/
   float: left;
   margin: 0 1.04%; /*margin: 0 10px;*/
  }
  
  .text {
   text-align: center;
  }
  
  @media (max-width: 1010px) {
   body {
    font-size: 0.85em;
    line-height: 1.28em;
    padding: 1em;
   }
  
   h3 {
    font-size: 1.05em;
    margin: 0.7em;
   }
  }
  
  @media (max-width: 940px) {
   body {
    font-size: 0.75em;
    line-height: 1.13em;
    padding: 0.5em;
   }
  
   h3 {
    margin: 0.25em 0;
    font-size: 1em;
   }
  }
  
  @media (max-width: 780px) {
   article {
    float: none;
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin: 0 0 2.55% 0;
   }
  
   .image {
    display: inline-block;
    vertical-align: middle;
   }
  
   .text {
    display: inline-block;
    max-width: 55%;
    vertical-align: middle;
   }
  
  }
  
  @media (max-width: 700px) {
   article {
    position: relative;
    width: 300px;
    margin: 10px auto;
   }
  
   .image, .text {
    display: block;
   }
  
   .text {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: none;
    background: rgba(255, 255, 255, 0.5);
    color: #444;
    font-size: 0.75em;
    z-index: 2;
   }
  
   h3 {
    color: #323232;
   }
  
   .image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container group"&gt;
  
    &lt;article&gt;
     &lt;header class="image"&gt;
      &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Fionna"&gt;
     &lt;/header&gt;
     &lt;div class="text"&gt;
      &lt;h3&gt;Fionna&lt;/h3&gt;
      &lt;p&gt;An alternate, female version of Finn, Fionna the human is just as brave, adventurous and awesome as her male counterpart as she faces off against her enemy, the Ice Queen.&lt;/p&gt;
     &lt;/div&gt;
    &lt;/article&gt;
  
  
    &lt;article&gt;
     &lt;header class="image"&gt;
      &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Peppermint Butler"&gt;
     &lt;/header&gt;
     &lt;div class="text"&gt;
      &lt;h3&gt;Peppermint Butler&lt;/h3&gt;
      &lt;p&gt;Peppermint Butler is an inhabitant of the Candy Kingdom and loyal butler to Princess Bubblegum. He has a mysterious past and an undefined relationship with Death.&lt;/p&gt;
     &lt;/div&gt;
    &lt;/article&gt;
  
  
    &lt;article&gt;
     &lt;header class="image"&gt;
      &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Flame Princess"&gt;
     &lt;/header&gt;
     &lt;div class="text"&gt;
      &lt;h3&gt;Flame Princess&lt;/h3&gt;
      &lt;p&gt;Flame Princess is a hot-headed princess from the Fire Kingdom and Finn's new crush. Her flame powers are tied to her emotions, and she's been known to anger quite easily.
      &lt;p&gt;
     &lt;/div&gt;
    &lt;/article&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>