@import url('/css/base.css');
/*그리드 이지만 layout을 잡는 것으로 기준으로 하기때문에
  클래스 네임앞에 layout의 약자  l을 붙여서 사용
*/
.l_gap_4{
  gap: 0.4rem;
}
.l_gap_8{
  gap: 0.8rem;
}
.l_gap_10{
  gap: 1.0rem;
}
.l_gap_14{
  gap: 1.4rem;
}
.l_gap_20{
  gap: 2.0rem;
}
.l_gap_100{
  gap: 10.0rem;
}

.l_flex_c_stretch{
  align-content: stretch;
}
.l_flex_c_start{
  align-content: flex-start;
}
.l_flex_c_end{
  align-content: end;
}
.l_flex_c_center{
  align-content: center;
}
.l_flex_c_between{
  align-content: space-between;
}
.l_flex_c_around{
  align-content: space-around;
}

.l_flex_item_start{
  align-self: flex-start;
}
.l_flex_item_end{
  align-self: flex-end;
}
.l_flex_item_center{
  align-self: center;
}
.l_flex_item_center{
  align-self: normal;
}
.l_flex_item_baseline{
  align-self: baseline;
}

.l_flex_auto{
  flex: 0 0 auto;
}
.l_flex_1{
  flex: 1 auto;
}
.l_flex_1_2{
  flex: 1 2 auto;
}
.l_flex_2_1{
  flex: 2 1 auto;
}

.l_flex_shrink{
  flex-shrink: 0;
}
.l_flex_grow{
  flex-grow: 1;
}

.l_flex_wrap{
  flex-wrap: wrap;
}
.l_flex_r_wrap{
  flex-wrap: wrap-reverse;
}


.l_flex{
  display: flex;
}
.l_flex_inline{
  display: inline-flex;
}
.l_flex_row{
  flex-direction: row;
}
.l_flex_r_row{
  flex-direction: row-reverse;
}
.l_flex_col{
  flex-direction: column;
}
.l_flex_r_col{
  flex-direction: column-reverse;
}
.l_flex_start{
  justify-content: flex-start;
}
.l_flex_end{
  justify-content: flex-end;
}
.l_flex_center{
  justify-content: center;
}
.l_flex_around{
  justify-content: space-around;
}
.l_flex_between{
  justify-content: space-between;
}
.l_flex_evenly{
  justify-content: space-evenly;
}
.l_flex_baseline{
  justify-content: baseline;
}
.l_flex_stretch{
  justify-content: stretch;
}

.l_flex_line_start{
  align-items: flex-start;
}
.l_flex_line_end{
  align-items: flex-end;
}
.l_flex_line_center{
  align-items: center;
}
.l_flex_line_baseline{
  align-items: baseline;
}