title: Styled components, adding a nested class
body: <p>I have the following classes I want to convert into styled components</p>
  <pre><code>.flex-container {
    display: flex;
    justify-content: center;   
    margin: 1em;
    column-gap: 1vw;
    row-gap: 1vh;
  } /*div*/
  
  .flex-container .flex-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
  } /*div*/
  
  .flex-item {
    height: 1.7rem;
    padding: 0 1.2rem;
  }
  
  
  @media only screen and (max-width: 480px) {
  .flex-container .flex-container{
     display:flex;
     flex-direction: column; 
     margin-bottom: 1vh;
    }
  }
  </code></pre>
  <p>I have done something like this</p>
  <pre><code>export const SCCheckoutSuccessButtonsContainer = styled.div&lt;any&gt;`
    display: flex;
    justify-content: center;   
    margin: 1em;
    column-gap: 1vw;
    row-gap: 1vh;
  `;
  
  export const SCCheckoutSuccessButtonsItem = styled.button&lt;any&gt;`
    height: 1.7rem;
    padding: 0 1.2rem;
  `;
  </code></pre>
  <p>Problem is I cant figure out where to add the
  <code>.flex-container .flex-container</code> block</p>
  <p>How do i target that element?</p>