title: Trying to get the images to fit in box and Boxes to be responsive
body: <p>I am trying to get this code to work I am about 90% of the way there, but am having difficulty scaling and making flexbox responsive. 
  What I want to know is:</p>
  
  <p>1) When I change the width to auto on line 20 (also 44, and 68) why does the image disappear? I want image to fit in box and the text overlay to be over image.</p>
  
  <p>2) How do I get the image box to be responsive? When in Mobile I want them stacked and then to flex as they get to desktop so they are in row. So column to row. Why is that not working? </p>
  
  <p>Any help to get images to fit in box and the text overlay to cover image and for it to flex and be responsive would be helpful. I have been stuck on this for quite a while and not sure why this is not working.<br>
  <a href="https://codepen.io/RJorns/pen/qGOPXB?editors=1100" rel="nofollow noreferrer">Code Pen link</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="opener-wrapper"&gt;
  
    &lt;div id="opener1" class="opener flex-center"&gt;
      &lt;div class="opener-msg"&gt;
        &lt;h1 class="opener-title"&gt;Lorem Ipsum Title&lt;/h1&gt;
        &lt;p class="opener-subtitle"&gt;Lorem Ipsum Text that doesnt matter&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="opener2" class="opener flex-center"&gt;
      &lt;div class="opener-msg"&gt;
        &lt;h1 class="opener-title"&gt;Lore Ipsum Title&lt;/h1&gt;
        &lt;p class="opener-subtitle"&gt;Lorem Ipsum Text that doesnt matter&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="opener3" class="opener flex-center"&gt;
      &lt;div class="opener-msg"&gt;
        &lt;h1 class="opener-title"&gt;Lorem Ipsum Title&lt;/h1&gt;
        &lt;p class="opener-subtitle"&gt;Lorem Ipsum Text that doesnt matter&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.opener-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  
  .opener {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
  }
  
  #opener1::before {
    background-image: url('https://source.unsplash.com/random');
    background-size: cover;
    background-position: center;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 12em;
    z-index: -2;
    opacity: 0.7;
  }
  
  #opener1::after {
    background-color: #314F59;
    content: "";
    display: block;
    position: absolute;
    width: auto;
    height: 100%;
    z-index: -1;
    opacity: .35;
  }
  
  #opener2::before {
    background-image: url('https://source.unsplash.com/random');
    background-size: cover;
    background-position: center;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 12em;
    z-index: -2;
    opacity: 0.7;
  }
  
  #opener2::after {
    background-color: #314F59;
    content: "";
    display: block;
    position: absolute;
    width: auto;
    height: 100%;
    z-index: -1;
    opacity: .35;
  }
  
  #opener3::before {
    background-image: url('https://source.unsplash.com/random');
    background-size: cover;
    background-position: center;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 12em;
    z-index: -2;
    opacity: 0.7;
  }
  
  #opener3::after {
    background-color: #314F59;
    content: "";
    display: block;
    position: absolute;
    width: auto;
    height: 100%;
    z-index: -1;
    opacity: .35;
  }
  
  .flex-center {
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;  */
  }
  
  .opener-msg {
    color: #fff;
    text-shadow: #343a40 2px 2px;
    min-width: 100%;
    min-height: 12em;
    position: relative;
    margin: 3% 0;
    text-transform: uppercase;
  }
  
  .opener-msg::before {
    content: "";
    display: block;
    position: absolute;
    margin-left: 0;
    min-width: 100%;
    min-height: 12em;
    z-index: -1;
    opacity: 0.4;
    background-color: #343a40;
  }
  
  .opener-title,
  .opener-subtitle {
    width: 100%;
    display: block;
    text-align: center;
  }
  
  .opener-title {
    margin: 3% 0;
  }
  </code></pre>