Cacher is the code snippet organizer for pro developers

.wrapFlex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* mqSP */
  @include mqSP {
    width: 100%;
    display: inline-block;
    .theme-others &{
      display: flex;
    }
  }
}


.col-1of3 {
  width: 260px;
  &:nth-child(1),
  &:nth-child(2),
  &:nth-child(3){
    margin-bottom: 120px;
  }
  &:nth-child(4),
  &:nth-child(5),
  &:nth-child(6){
    margin-bottom: 115px;
  }
  /* mqSP */
  @include mqSP {
    margin: 0 auto;
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6){
      margin-bottom: 20px;
    }
  }
}

.col-1of4{
  width: 180px;
  text-align: center;
  font-size: 30px;
  color: $c_w1;
  /* mqSP */
  @include mqSP{
    width: 110px;
  }
}

/* mqSP */
@include mqSP {
  .sp-2column{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
  }
}

    <section class="theme-things">
      <h1 class="heading_secondary">{{themeText.detail_things_heading[lang]}}</h1>
      <ul class="cards wrapFlex">
        <li class="col-1of3" v-for="(item,index) in themeText.detail_things_item[lang]">
          <div class="cards-image"><img :src="'/assets/img/' + theme + '-child_thumb0' + (index + 1) + '.jpg'" alt=""></div>
          <div class="cards-text" v-html="item"></div>
        </li>
      </ul>
    </section>
    
    <section class="theme-others">
      <ul class="theme-others-items wrapFlex">
        <li class="col-1of4" v-for="(item,index) in text.header_menu_item[lang]"><router-link :to="item.toLowerCase()"><img :src="'/assets/img/top_0' + (index + 3) + '.jpg'" alt="">{{item}}</router-link></li>
      </ul>
    </section>

.l-wrap-grid{
  width: 1020px;
  margin: 0 auto;
}

/** * pc */
//@include pc {
//    .l-wrap-grid{
//    width: calc-vw(1020, 1280);
//    }
//}
/**  * mobile */
@include mobile {
    .l-wrap-grid{
    width: 100%;
    display: inline-block;
    margin-top: calc-vw(20,320);
    }
}

.l-grid{
  display: flex;
  justify-content: space-between;
}
/**  * mobile */
@include mobile {
    .l-grid{
    display: inherit;
    justify-content: inherit;
    width: 100%;
  }
}


.l-grid-column-1of1{
  width: 100%;
  border-top: 1px $c_w3 solid;
  &.l-gird-outline{
    width: 800px;
    margin: 0 auto;
  }
  @include mobile{
    &.l-gird-outline{
      width: calc-vw(540,640);
      margin:0 auto;
    }
  }
}

.l-grid-column-1of2{
  width: 480px;
  border-top: 1px $c_w3 solid;
}

.l-grid-wrap-1of2 {
  display: flex;
  justify-content:space-between;

    .l-grid-column-1of2 {
  border-top: inherit;
  }
} 

/** * pc */
//@include pc {
//    .l-grid-column-1of2{
//    width: calc-vw(480, 1280);
//    }
//}
/**  * mobile */
@include mobile {
      .l-grid-wrap-1of2 {
    display: inherit;
    justify-content:inherit;
    } 
    .l-grid-column-1of2{
      width: 100%;
    }
}

.l-grid-column-1of3 {
  border-top: 1px $c_w3 solid;
  width: 300px;
  .l-accordion &{
    border-top: inherit;
  }
}

/** * pc */
//@include pc {
//    .l-grid-column-1of3{
//    width: calc-vw(300, 1280);
//    margin: 0 auto;
//    }
//}
/**  * mobile */
@include mobile {
  .l-grid-column-1of3{
    width: calc-vw(540,640);
    margin: 0 auto;
    margin-top: calc-vw(60,640);
    .l-accordion &{
      margin-top: calc-vw(18,640);
    }
  }
}

.l-grid-column-1of4{
  border-top: 1px $c_w3 solid;
  width: 210px;
}

/** * pc */
//@include pc {
//  .l-grid-column-1of4{
//    width: calc-vw(210, 1280);
//  }
//}
/**  * mobile */
@include mobile {
  .l-grid-column-1of4{
    width: calc-vw(250,640);
//    margin-top: calc-vw(60,640);
  }
  .l-sp-2column{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
  }
}


.l-gird-p{
  width: 100%;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
  &:last-child{
    margin-bottom: 54px;
  }
  .l-accordion &{
    margin-bottom: 100px;
  }
  .voice &{
    margin-bottom: 20px;
  }
}

.voice>.l-grid-column-1of3{
  border-bottom: 1px solid #858585;
  position: relative;
  &::after{
    content: "";
    position: absolute;
    background-color: $c_b5;
    transform: rotate(45deg);
    right: 0;
    left: 0;
    bottom: -10px;
    margin: 0 auto;
    display: block;
    border: 1px solid #858585;
    width: 18px;
    height: 18px;
    border-top: 1px solid $c_b5;
    border-left: 1px solid $c_b5;
  }
}

/**  * mobile */
@include mobile {
  .l-gird-p{
    margin-bottom: calc-vw(16,320);
    &:last-child{
      margin-bottom: calc-vw(16,320);
    }
    .l-grid-column-1of3:last-child &{
      .report &{
          margin-bottom: calc-vw(30,320);
      }
    }
  }
}
@include mobile {
  .voice>.l-grid-column-1of3{
    padding-bottom: calc-vw(30,640);
    margin-bottom: calc-vw(60,640);
    &::after{
      bottom: calc-vw(-10,640);
      margin: 0 auto;
      width: calc-vw(18,640);
      height: calc-vw(18,640);
    }
  }
}

<section class="l-section">
  <div class="container">
    <div class="contant">

      <div class="wrap-grid">

        <div class="row">
          <div class="col-1of1">
            <h3 class="tertiary">OUTLINE</h3>
            <p class="gird-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nobis quo praesentium odio veniam placeat adipisci facilis, deserunt aspernatur nostrum, eaque aliquid reprehenderit ab accusamus facere commodi, exercitationem molestiae. Assumenda.</p>
          </div>
        </div>
      
        <div class="row">
          <div class="col-1of2">
            <h3 class="tertiary">WHAT</h3>
            <p class="gird-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia earum ipsam, repudiandae corporis facere, error cumque rem, nemo explicabo unde maiores eveniet quam deserunt minima quas soluta necessitatibus dolor.</p>
          </div>

          <div class="col-1of2">
            <h3 class="tertiary">WHO</h3>
            <p class="gird-p attention">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo aspernatur nihil doloribus, dolores ab odit temporibus omnis perferendis consectetur nam molestias fugit praesentium expedita nemo repellendus recusandae! Veritatis, ipsa, eaque!</p>
          </div>
        </div>
      
        <div class="row">
          <div class="col-1of3">
            <h3 class="tertiary">WHAT</h3>
            <p class="gird-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia earum ipsam, repudiandae corporis facere, error cumque rem, nemo explicabo unde maiores eveniet quam deserunt minima quas soluta necessitatibus dolor.</p>
          </div>
      
          <div class="col-1of3">
            <h3 class="tertiary">WHO</h3>
            <p class="gird-p attention">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo aspernatur nihil doloribus, dolores ab odit temporibus omnis perferendis consectetur nam molestias fugit praesentium expedita nemo repellendus recusandae! Veritatis, ipsa, eaque!</p>
          </div>
      
          <div class="col-1of3">
            <h3 class="tertiary">WHEN</h3>
            <p class="gird-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi nemo, nam ex quos tenetur error aut aliquam deleniti modi, assumenda rem, recusandae ratione natus. Repellendus magni laboriosam rerum veniam ipsam.</p>
          </div>
        </div>
      
        <div class="row sp-2column ">
          <div class="col-1of4">
            <h3 class="tertiary">LOCATION</h3>
            <p class="gird-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
          <div class="col-1of4">
            <h3 class="tertiary">POSITIONS</h3>
            <p class="gird-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
          <div class="col-1of4">
            <h3 class="tertiary">COMPENSATION</h3>
            <p class="gird-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
          <div class="col-1of4">
            <h3 class="tertiary">DEADLINE</h3>
            <p class="gird-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>