Same Class with different atributes

by davidxmartins

HTML

<div class="page-01">
    <div class="container">Some text here</div>     
    

</div>

<div class="page-02">
    <div class="container">Some text here</div>     
    

</div>




<section>

<div class="layout">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
</div>

</section>

CSS

.page-01 > .container { 
    background: green;
    width: 100%;
    height: 50px;
}
.page-02 > .container { 
    background: red;
    width: 50%;
    height: 20px;
}




section > .layout {
  display: flex;
  row-gap: 10px;
  column-gap: 30px;
  
}

.layout > .section {
  flex: 1; /*grow*/
  background: #ccc;
  padding: 1rem;
}

@media (max-width: 768px) { /*breakpoint*/
  .layout {
    flex-direction: column;
  }
}