<h1>Responsive Infographics using Flexbox</h1>

<div class="card-container">
  <div class="card-wrapper">
    <div class="card-title">
      <h2>Step 1</h2>
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt neque deserunt praesentium sint repellat officiis atque temporibus! Dolorum dolore reiciendis impedit corporis placeat quasi nihil tenetur minima porro, cumque aperiam.
    </div>
  </div>
  
  <div class="card-wrapper">
    <div class="card-title">
      <h2>Step 2</h2>
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt neque deserunt praesentium sint repellat officiis atque temporibus! Dolorum dolore reiciendis impedit corporis placeat quasi nihil tenetur minima porro, cumque aperiam.
    </div>
  </div>
  
  <div class="card-wrapper">
    <div class="card-title">
      <h2>Step 3</h2>
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt neque deserunt praesentium sint repellat officiis atque temporibus! Dolorum dolore reiciendis impedit corporis placeat quasi nihil tenetur minima porro, cumque aperiam.
    </div>
  </div>
  
  <div class="card-wrapper">
    <div class="card-title">
      <h2>Step 4</h2>
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt neque deserunt praesentium sint repellat officiis atque temporibus! Dolorum dolore reiciendis impedit corporis placeat quasi nihil tenetur minima porro, cumque aperiam.
    </div>
  </div>
  
  <div class="card-wrapper">
    <div class="card-title">
      <h2>Step 5</h2>
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt neque deserunt praesentium sint repellat officiis atque temporibus! Dolorum dolore reiciendis impedit corporis placeat quasi nihil tenetur minima porro, cumque aperiam.
    </div>
  </div>
  
  <div class="card-wrapper">
    <div class="card-title">
      <h2>Step 6</h2>
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt neque deserunt praesentium sint repellat officiis atque temporibus! Dolorum dolore reiciendis impedit corporis placeat quasi nihil tenetur minima porro, cumque aperiam.
    </div>
  </div>
<div>

*{
  box-sizing: border-box;
}

body{
  font-family: Montserrat,sans-serif;
  background-image: linear-gradient(125deg, #ffff80, #ffff68);
  margin: 50px;
  
  .card-container{
      max-width: 1000px;
      margin: auto;
  }
  
  >h1, >p{
    text-align:center;
  }
  
  >h1{
    margin-top: 30px;
    margin-bottom: 0px;
    color: #f50a45;
  }
  
  >p{
    font-size:20px;
    margin-top: 10px;
    margin-bottom: 40px;
  }
}



.card-wrapper{
  display: flex;
  margin: 40px 0px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
  
  &:after{
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    top: 0%;
  }
  
  &:nth-child(odd){
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    
    &:after{
      right: 0%;
      box-shadow: inset -10px 0px 10px -5px rgba(0, 0, 0, 0.4); 
    }
  }
  
  &:nth-child(even){
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    
    &:after{
      left: 0%;
      box-shadow: inset 10px 0px 10px -5px rgba(0, 0, 0, 0.4); 
    }
    
    > div:nth-child(1){
      order: 2;
    }
    > div:nth-child(2){
      order: 1;
    }
  }
  
  > div{
    padding: 20px;
  }
  
  &:nth-child(1){
    background-image: linear-gradient(90deg, #9274b7, #3b4a8d);
  }
   &:nth-child(2){
    background-image: linear-gradient(90deg, #d14498, #91287d);
  }
   &:nth-child(3){
    background-image: linear-gradient(90deg, #f6671f, #c01b1c);
  }
   &:nth-child(4){
    background-image: linear-gradient(90deg, #fec22f, #ea9826);
  }
   &:nth-child(5){
    background-image: linear-gradient(90deg, #cfdc45, #89b343);
  }
   &:nth-child(6){
    background-image: linear-gradient(90deg, #6fc6a9, #058ba9);
  }
  
  > .card-title{
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    text-align: center;
    
    >h2{
      margin: 0px;
      transform: rotate(-90deg);
      text-transform: uppercase;
      transition: all 0.5s ease-in-out;
    }
  }
  
  > .card-content{
    color: #ffffff;
    align-self: center;
  }
  
  @media (max-width: 767px){
    flex-wrap: wrap;
    flex-direction: column;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    
    &:after{
      top: calc(100% - 20px);
      bottom: 0px;
      width: 100%;
      height: 20px;
      box-shadow: inset 0px -10px 10px -5px rgba(0, 0, 0, 0.4) !important; 
    }
    
    &:nth-child(even){
      > div:nth-child(1){
        order: 1;
      }
      > div:nth-child(2){
        order: 2;
      }
    }
    
    > .card-title{
      min-height: unset;
    }
    
    > .card-title > h2{
      transform: rotate(0deg);
    }
  }
}