article {
      margin: 15px;
      border-radius: 25px;
      border: thin solid #800000;
      overflow: hidden;
      background: linear-gradient(to bottom, #80000066, #00000000);
     }
    
     article:nth-of-type(even) {
      flex-direction: row-reverse;
     }
     
     article > div {
       width: 100%;
       color: #ffffff;
       text-align: center;
       padding: 25px;
       box-sizing: border-box;
     }
    
     article > div > h1 {
      margin: 5px 0;
     }
    
     article > div > p {
      text-align: justify;
      display: block;
     }
    
    

 /*Desktop only CSS*/

  @media only screen and (min-width: 1000px) {
    
    article {
      display: flex;
      align-items: center;
    }
    
     article > div > p {
       font-size: 1.5em;
     }
    
     article > img {
       max-width: 500px;
     }
    
  }
  
 /*Mobile only CSS*/

  @media only screen and (max-width: 999px) {
    
     article > div > p {
       font-size: 1.1em;
     }
    
  }