css modules

手軽に使えるcssスニペットモジュールメモ
グリッドシステム・パネル・タブメニュー
グリッドはtableのcolspan的に追加できるようにしてみたのですが、記述量が多くなりすぎてしまいました。
コンテナに指定したカラムグリッド数に対するcolspan数で指定する考え方はやめて
.col1of2 のように class名を比率で統一して軽量化を図るか考え中。。


```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
<style>
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP Regular"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
}

/* sample +++++++++++++++++++ */
.sample-width {
  width: 810px;
  margin: 24px auto;
  border: 1px solid transparent;
}


/* flexbox grid system +++++++++++++++++++ */
.l-flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.l-flex > .col,
.l-flex > .col2,
.l-flex > .col3,
.l-flex > .col4,
.l-flex > .col5,
.l-flex > .col6 {
  flex: 0 1 auto;
}
/* grid gap */
.l-flex.gap4 { margin-top: -4px; margin-left: -4px; }
.l-flex.gap4 > .col,
.l-flex.gap4 > .col2,
.l-flex.gap4 > .col3,
.l-flex.gap4 > .col4,
.l-flex.gap4 > .col5,
.l-flex.gap4 > .col6 {
  margin-top: 4px;
  margin-left: 4px;
}
.l-flex.gap8 { margin-top: -8px; margin-left: -8px; }
.l-flex.gap8 > .col,
.l-flex.gap8 > .col2,
.l-flex.gap8 > .col3,
.l-flex.gap8 > .col4,
.l-flex.gap8 > .col5,
.l-flex.gap8 > .col6 {
  margin-top: 8px;
  margin-left: 8px;
}
.l-flex.gap12 { margin-top: -12px; margin-left: -12px; }
.l-flex.gap12 > .col,
.l-flex.gap12 > .col2,
.l-flex.gap12 > .col3,
.l-flex.gap12 > .col4,
.l-flex.gap12 > .col5,
.l-flex.gap12 > .col6 {
  margin-top: 12px;
  margin-left: 12px;
}
.l-flex.gap16 { margin-top: -16px; margin-left: -16px; }
.l-flex.gap16 > .col,
.l-flex.gap16 > .col2,
.l-flex.gap16 > .col3,
.l-flex.gap16 > .col4,
.l-flex.gap16 > .col5,
.l-flex.gap16 > .col6 {
  margin-top: 16px;
  margin-left: 16px;
}
.l-flex.gap24 { margin-top: -24px; margin-left: -24px; }
.l-flex.gap24 > .col,
.l-flex.gap24 > .col2,
.l-flex.gap24 > .col3,
.l-flex.gap24 > .col4,
.l-flex.gap24 > .col5,
.l-flex.gap24 > .col6 {
  margin-top: 24px;
  margin-left: 24px;
}
.l-flex.gapx4 { margin-left: -4px; }
.l-flex.gapx4 > .col,
.l-flex.gapx4 > .col2,
.l-flex.gapx4 > .col3,
.l-flex.gapx4 > .col4,
.l-flex.gapx4 > .col5,
.l-flex.gapx4 > .col6 {
  margin-left: 4px;
}
.l-flex.gapx8 { margin-left: -8px; }
.l-flex.gapx8 > .col,
.l-flex.gapx8 > .col2,
.l-flex.gapx8 > .col3,
.l-flex.gapx8 > .col4,
.l-flex.gapx8 > .col5,
.l-flex.gapx8 > .col6 {
  margin-left: 8px;
}
.l-flex.gapx12 { margin-left: -12px; }
.l-flex.gapx12 > .col,
.l-flex.gapx12 > .col2,
.l-flex.gapx12 > .col3,
.l-flex.gapx12 > .col4,
.l-flex.gapx12 > .col5,
.l-flex.gapx12 > .col6 {
  margin-left: 12px;
}
.l-flex.gapx16 { margin-left: -16px; }
.l-flex.gapx16 > .col,
.l-flex.gapx16 > .col2,
.l-flex.gapx16 > .col3,
.l-flex.gapx16 > .col4,
.l-flex.gapx16 > .col5,
.l-flex.gapx16 > .col6 {
  margin-left: 16px;
}
.l-flex.gapx24 { margin-left: -24px; }
.l-flex.gapx24 > .col,
.l-flex.gapx24 > .col2,
.l-flex.gapx24 > .col3,
.l-flex.gapx24 > .col4,
.l-flex.gapx24 > .col5,
.l-flex.gapx24 > .col6 {
  margin-left: 24px;
}
.l-flex.gapy4 { margin-top: -4px; }
.l-flex.gapy4 > .col,
.l-flex.gapy4 > .col2,
.l-flex.gapy4 > .col3,
.l-flex.gapy4 > .col4,
.l-flex.gapy4 > .col5,
.l-flex.gapy4 > .col6 {
  margin-top: 4px;
}
.l-flex.gapy8 { margin-top: -8px; }
.l-flex.gapy8 > .col,
.l-flex.gapy8 > .col2,
.l-flex.gapy8 > .col3,
.l-flex.gapy8 > .col4,
.l-flex.gapy8 > .col5,
.l-flex.gapy8 > .col6 {
  margin-top: 8px;
}
.l-flex.gapy12 { margin-top: -12px; }
.l-flex.gapy12 > .col,
.l-flex.gapy12 > .col2,
.l-flex.gapy12 > .col3,
.l-flex.gapy12 > .col4,
.l-flex.gapy12 > .col5,
.l-flex.gapy12 > .col6 {
  margin-top: 12px;
}
.l-flex.gapy16 { margin-top: -16px; }
.l-flex.gapy16 > .col,
.l-flex.gapy16 > .col2,
.l-flex.gapy16 > .col3,
.l-flex.gapy16 > .col4,
.l-flex.gapy16 > .col5,
.l-flex.gapy16 > .col6 {
  margin-top: 16px;
}
.l-flex.gapy24 { margin-top: -24px; }
.l-flex.gapy24 > .col,
.l-flex.gapy24 > .col2,
.l-flex.gapy24 > .col3,
.l-flex.gapy24 > .col4,
.l-flex.gapy24 > .col5,
.l-flex.gapy24 > .col6 {
  margin-top: 24px;
}
/* 2 col width */
.l-flex.cols2 > .col {
  width: calc((100% / 2));
}
.l-flex.cols2 > .col2 {
  width: 100%;
}
.l-flex.cols2.gap4 > .col,
.l-flex.cols2.gapx4 > .col {
  width: calc((100% / 2) - 4px);
}
.l-flex.cols2.gap4 > .col2,
.l-flex.cols2.gapx4 > .col2 {
  width: calc(100% - 4px);
}
.l-flex.cols2.gap8 > .col,
.l-flex.cols2.gapx8 > .col {
  width: calc((100% / 2) - 8px);
}
.l-flex.cols2.gap8 > .col2,
.l-flex.cols2.gapx8 > .col2 {
  width: calc(100% - 8px);
}
.l-flex.cols2.gap12 > .col,
.l-flex.cols2.gapx12 > .col {
  width: calc((100% / 2) - 12px);
}
.l-flex.cols2.gap12 > .col2,
.l-flex.cols2.gapx12 > .col2 {
  width: calc(100% - 12px);
}
.l-flex.cols2.gap16 > .col,
.l-flex.cols2.gapx16 > .col {
  width: calc((100% / 2) - 16px);
}
.l-flex.cols2.gap16 > .col2,
.l-flex.cols2.gapx16 > .col2 {
  width: calc(100% - 16px);
}
.l-flex.cols2.gap24 > .col,
.l-flex.cols2.gapx24 > .col {
  width: calc((100% / 2) - 24px);
}
.l-flex.cols2.gap24 > .col2,
.l-flex.cols2.gapx24 > .col2 {
  width: calc(100% - 24px);
}
/* 3 col width */
.l-flex.cols3 > .col {
  width: calc((100% / 3));
}
.l-flex.cols3 > .col2 {
  width: calc((100% / 3) * 2);
}
.l-flex.cols3 > .col3 {
  width: 100%;
}
.l-flex.cols3.gap4 > .col,
.l-flex.cols3.gapx4 > .col {
  width: calc((100% / 3) - 4px);
}
.l-flex.cols3.gap4 > .col2,
.l-flex.cols3.gapx4 > .col2 {
  width: calc(((100% / 3) * 2) - 4px);
}
.l-flex.cols3.gap4 > .col3,
.l-flex.cols3.gapx4 > .col3 {
  width: calc(100% - 4px);
}
.l-flex.cols3.gap8 > .col,
.l-flex.cols3.gapx8 > .col {
  width: calc((100% / 3) - 8px);
}
.l-flex.cols3.gap8 > .col2,
.l-flex.cols3.gapx8 > .col2 {
  width: calc(((100% / 3) * 2) - 8px);
}
.l-flex.cols3.gap8 > .col3,
.l-flex.cols3.gapx8 > .col3 {
  width: calc(100% - 8px);
}
.l-flex.cols3.gap12 > .col,
.l-flex.cols3.gapx12 > .col {
  width: calc((100% / 3) - 12px);
}
.l-flex.cols3.gap12 > .col2,
.l-flex.cols3.gapx12 > .col2 {
  width: calc(((100% / 3) * 2) - 12px);
}
.l-flex.cols3.gap12 > .col3,
.l-flex.cols3.gapx12 > .col3 {
  width: calc(100% - 12px);
}
.l-flex.cols3.gap16 > .col,
.l-flex.cols3.gapx16 > .col {
  width: calc((100% / 3) - 16px);
}
.l-flex.cols3.gap16 > .col2,
.l-flex.cols3.gapx16 > .col2 {
  width: calc(((100% / 3) * 2) - 16px);
}
.l-flex.cols3.gap16 > .col3,
.l-flex.cols3.gapx16 > .col3 {
  width: calc(100% - 16px);
}
.l-flex.cols3.gap24 > .col,
.l-flex.cols3.gapx24 > .col {
  width: calc((100% / 3) - 24px);
}
.l-flex.cols3.gap24 > .col2,
.l-flex.cols3.gapx24 > .col2 {
  width: calc(((100% / 3) * 2) - 24px);
}
.l-flex.cols3.gap24 > .col3,
.l-flex.cols3.gapx24 > .col3 {
  width: calc(100% - 24px);
}
/* 4 col width */
.l-flex.cols4 > .col {
  width: calc((100% / 4));
}
.l-flex.cols4 > .col2 {
  width: calc((100% / 4) * 2);
}
.l-flex.cols4 > .col3 {
  width: calc((100% / 4) * 3);
}
.l-flex.cols4 > .col4 {
  width: calc(100% - 4px);
}
.l-flex.cols4.gap4 > .col,
.l-flex.cols4.gapx4 > .col {
  width: calc((100% / 4) - 4px);
}
.l-flex.cols4.gap4 > .col2,
.l-flex.cols4.gapx4 > .col2 {
  width: calc(((100% / 4) * 2) - 4px);
}
.l-flex.cols4.gap4 > .col3,
.l-flex.cols4.gapx4 > .col3 {
  width: calc(((100% / 4) * 3) - 4px);
}
.l-flex.cols4.gap4 > .col4,
.l-flex.cols4.gapx4 > .col4 {
  width: calc(100% - 4px);
}
.l-flex.cols4.gap8 > .col,
.l-flex.cols4.gapx8 > .col {
  width: calc((100% / 4) - 8px);
}
.l-flex.cols4.gap8 > .col2,
.l-flex.cols4.gapx8 > .col2 {
  width: calc(((100% / 4) * 2) - 8px);
}
.l-flex.cols4.gap8 > .col3,
.l-flex.cols4.gapx8 > .col3 {
  width: calc(((100% / 4) * 3) - 8px);
}
.l-flex.cols4.gap8 > .col4,
.l-flex.cols4.gapx8 > .col4 {
  width: calc(100% - 8px);
}
.l-flex.cols4.gap12 > .col,
.l-flex.cols4.gapx12 > .col {
  width: calc((100% / 4) - 12px);
}
.l-flex.cols4.gap12 > .col2,
.l-flex.cols4.gapx12 > .col2 {
  width: calc(((100% / 4) * 2) - 12px);
}
.l-flex.cols4.gap12 > .col3,
.l-flex.cols4.gapx12 > .col3 {
  width: calc(((100% / 4) * 3) - 12px);
}
.l-flex.cols4.gap12 > .col4,
.l-flex.cols4.gapx12 > .col4 {
  width: calc(100% - 12px);
}
.l-flex.cols4.gap16 > .col,
.l-flex.cols4.gapx16 > .col {
  width: calc((100% / 4) - 16px);
}
.l-flex.cols4.gap16 > .col2,
.l-flex.cols4.gapx16 > .col2 {
  width: calc(((100% / 4) * 2) - 16px);
}
.l-flex.cols4.gap16 > .col3,
.l-flex.cols4.gapx16 > .col3 {
  width: calc(((100% / 4) * 3) - 16px);
}
.l-flex.cols4.gap16 > .col4,
.l-flex.cols4.gapx16 > .col4 {
  width: calc(100% - 16px);
}
.l-flex.cols4.gap24 > .col,
.l-flex.cols4.gapx24 > .col {
  width: calc((100% / 4) - 24px);
}
.l-flex.cols4.gap24 > .col2,
.l-flex.cols4.gapx24 > .col2 {
  width: calc(((100% / 4) * 2) - 24px);
}
.l-flex.cols4.gap24 > .col3,
.l-flex.cols4.gapx24 > .col3 {
  width: calc(((100% / 4) * 3) - 24px);
}
.l-flex.cols4.gap24 > .col4,
.l-flex.cols4.gapx24 > .col4 {
  width: calc(100% - 24px);
}
/* 5 col width */
.l-flex.cols5 > .col {
  width: calc((100% / 5));
}
.l-flex.cols5 > .col2 {
  width: calc((100% / 5) * 2);
}
.l-flex.cols5 > .col3 {
  width: calc((100% / 5) * 3);
}
.l-flex.cols5 > .col4 {
  width: calc((100% / 5) * 4);
}
.l-flex.cols5 > .col5 {
  width: 100%;
}
.l-flex.cols5.gap4 > .col,
.l-flex.cols5.gapx4 > .col {
  width: calc((100% / 5) - 4px);
}
.l-flex.cols5.gap4 > .col2,
.l-flex.cols5.gapx4 > .col2 {
  width: calc(((100% / 5) * 2) - 4px);
}
.l-flex.cols5.gap4 > .col3,
.l-flex.cols5.gapx4 > .col3 {
  width: calc(((100% / 5) * 3) - 4px);
}
.l-flex.cols5.gap4 > .col4,
.l-flex.cols5.gapx4 > .col4 {
  width: calc(((100% / 5) * 4) - 4px);
}
.l-flex.cols5.gap4 > .col5,
.l-flex.cols5.gapx4 > .col5 {
  width: calc(100% - 4px);
}
.l-flex.cols5.gap8 > .col,
.l-flex.cols5.gapx8 > .col {
  width: calc((100% / 5) - 8px);
}
.l-flex.cols5.gap8 > .col2,
.l-flex.cols5.gapx8 > .col2 {
  width: calc(((100% / 5) * 2) - 8px);
}
.l-flex.cols5.gap8 > .col3,
.l-flex.cols5.gapx8 > .col3 {
  width: calc(((100% / 5) * 3) - 8px);
}
.l-flex.cols5.gap8 > .col4,
.l-flex.cols5.gapx8 > .col4 {
  width: calc(((100% / 5) * 4) - 8px);
}
.l-flex.cols5.gap8 > .col5,
.l-flex.cols5.gapx8 > .col5 {
  width: calc(100% - 8px);
}
.l-flex.cols5.gap12 > .col,
.l-flex.cols5.gapx12 > .col {
  width: calc((100% / 5) - 12px);
}
.l-flex.cols5.gap12 > .col2,
.l-flex.cols5.gapx12 > .col2 {
  width: calc(((100% / 5) * 2) - 12px);
}
.l-flex.cols5.gap12 > .col3,
.l-flex.cols5.gapx12 > .col3 {
  width: calc(((100% / 5) * 3) - 12px);
}
.l-flex.cols5.gap12 > .col4,
.l-flex.cols5.gapx12 > .col4 {
  width: calc(((100% / 5) * 4) - 12px);
}
.l-flex.cols5.gap12 > .col5,
.l-flex.cols5.gapx12 > .col5 {
  width: calc(100% - 12px);
}
.l-flex.cols5.gap16 > .col,
.l-flex.cols5.gapx16 > .col {
  width: calc((100% / 5) - 16px);
}
.l-flex.cols5.gap16 > .col2,
.l-flex.cols5.gapx16 > .col2 {
  width: calc(((100% / 5) * 2) - 16px);
}
.l-flex.cols5.gap16 > .col3,
.l-flex.cols5.gapx16 > .col3 {
  width: calc(((100% / 5) * 3) - 16px);
}
.l-flex.cols5.gap16 > .col4,
.l-flex.cols5.gapx16 > .col4 {
  width: calc(((100% / 5) * 4) - 16px);
}
.l-flex.cols5.gap16 > .col5,
.l-flex.cols5.gapx16 > .col5 {
  width: calc(100% - 16px);
}
.l-flex.cols5.gap24 > .col,
.l-flex.cols5.gapx24 > .col {
  width: calc((100% / 5) - 24px);
}
.l-flex.cols5.gap24 > .col2,
.l-flex.cols5.gapx24 > .col2 {
  width: calc(((100% / 5) * 2) - 24px);
}
.l-flex.cols5.gap24 > .col3,
.l-flex.cols5.gapx24 > .col3 {
  width: calc(((100% / 5) * 3) - 24px);
}
.l-flex.cols5.gap24 > .col4,
.l-flex.cols5.gapx24 > .col4 {
  width: calc(((100% / 5) * 4) - 24px);
}
.l-flex.cols5.gap24 > .col5,
.l-flex.cols5.gapx24 > .col5 {
  width: calc(100% - 24px);
}
/* 6 col width */
.l-flex.cols6 > .col {
  width: calc((100% / 6));
}
.l-flex.cols6 > .col2 {
  width: calc((100% / 6) * 2);
}
.l-flex.cols6 > .col3 {
  width: calc((100% / 6) * 3);
}
.l-flex.cols6 > .col4 {
  width: calc((100% / 6) * 4);
}
.l-flex.cols6 > .col5 {
  width: calc((100% / 6) * 5);
}
.l-flex.cols6 > .col6 {
  width: 100%;
}
.l-flex.cols6.gap4 > .col,
.l-flex.cols6.gapx4 > .col {
  width: calc((100% / 6) - 4px);
}
.l-flex.cols6.gap4 > .col2,
.l-flex.cols6.gapx4 > .col2 {
  width: calc(((100% / 6) * 2) - 4px);
}
.l-flex.cols6.gap4 > .col3,
.l-flex.cols6.gapx4 > .col3 {
  width: calc(((100% / 6) * 3) - 4px);
}
.l-flex.cols6.gap4 > .col4,
.l-flex.cols6.gapx4 > .col4 {
  width: calc(((100% / 6) * 4) - 4px);
}
.l-flex.cols6.gap4 > .col5,
.l-flex.cols6.gapx4 > .col5 {
  width: calc(((100% / 6) * 5) - 4px);
}
.l-flex.cols6.gap4 > .col6,
.l-flex.cols6.gapx4 > .col6 {
  width: calc(100% - 4px);
}
.l-flex.cols6.gap8 > .col,
.l-flex.cols6.gapx8 > .col {
  width: calc((100% / 6) - 8px);
}
.l-flex.cols6.gap8 > .col2,
.l-flex.cols6.gapx8 > .col2 {
  width: calc(((100% / 6) * 2) - 8px);
}
.l-flex.cols6.gap8 > .col3,
.l-flex.cols6.gapx8 > .col3 {
  width: calc(((100% / 6) * 3) - 8px);
}
.l-flex.cols6.gap8 > .col4,
.l-flex.cols6.gapx8 > .col4 {
  width: calc(((100% / 6) * 4) - 8px);
}
.l-flex.cols6.gap8 > .col5,
.l-flex.cols6.gapx8 > .col5 {
  width: calc(((100% / 6) * 5) - 8px);
}
.l-flex.cols6.gap8 > .col6,
.l-flex.cols6.gapx8 > .col6 {
  width: calc(100% - 8px);
}
.l-flex.cols6.gap12 > .col,
.l-flex.cols6.gapx12 > .col {
  width: calc((100% / 6) - 12px);
}
.l-flex.cols6.gap12 > .col2,
.l-flex.cols6.gapx12 > .col2 {
  width: calc(((100% / 6) * 2) - 12px);
}
.l-flex.cols6.gap12 > .col3,
.l-flex.cols6.gapx12 > .col3 {
  width: calc(((100% / 6) * 3) - 12px);
}
.l-flex.cols6.gap12 > .col4,
.l-flex.cols6.gapx12 > .col4 {
  width: calc(((100% / 6) * 4) - 12px);
}
.l-flex.cols6.gap12 > .col5,
.l-flex.cols6.gapx12 > .col5 {
  width: calc(((100% / 6) * 5) - 12px);
}
.l-flex.cols6.gap12 > .col6,
.l-flex.cols6.gapx12 > .col6 {
  width: calc(100% - 12px);
}
.l-flex.cols6.gap16 > .col,
.l-flex.cols6.gapx16 > .col {
  width: calc((100% / 6) - 16px);
}
.l-flex.cols6.gap16 > .col2,
.l-flex.cols6.gapx16 > .col2 {
  width: calc(((100% / 6) * 2) - 16px);
}
.l-flex.cols6.gap16 > .col3,
.l-flex.cols6.gapx16 > .col3 {
  width: calc(((100% / 6) * 3) - 16px);
}
.l-flex.cols6.gap16 > .col4,
.l-flex.cols6.gapx16 > .col4 {
  width: calc(((100% / 6) * 4) - 16px);
}
.l-flex.cols6.gap16 > .col5,
.l-flex.cols6.gapx16 > .col5 {
  width: calc(((100% / 6) * 5) - 16px);
}
.l-flex.cols6.gap16 > .col6,
.l-flex.cols6.gapx16 > .col6 {
  width: calc(100% - 16px);
}
.l-flex.cols6.gap24 > .col,
.l-flex.cols6.gapx24 > .col {
  width: calc((100% / 6) - 24px);
}
.l-flex.cols6.gap24 > .col2,
.l-flex.cols6.gapx24 > .col2 {
  width: calc(((100% / 6) * 2) - 24px);
}
.l-flex.cols6.gap24 > .col3,
.l-flex.cols6.gapx24 > .col3 {
  width: calc(((100% / 6) * 3) - 24px);
}
.l-flex.cols6.gap24 > .col4,
.l-flex.cols6.gapx24 > .col4 {
  width: calc(((100% / 6) * 4) - 24px);
}
.l-flex.cols6.gap24 > .col5,
.l-flex.cols6.gapx24 > .col5 {
  width: calc(((100% / 6) * 5) - 24px);
}
.l-flex.cols6.gap24 > .col6,
.l-flex.cols6.gapx24 > .col6 {
  width: calc(100% - 24px);
}


/* tabs primary +++++++++++++++++++ */
.m-tabs-primary {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 -4px 4px -4px rgba(0,0,0,0.15) inset;
  font-size: 14px;
  line-height: 1.2857;
  list-style: none;
}
/* tab */
.m-tabs-primary > li {
  display: flex;
  margin-bottom: -1px;
  text-align: center;
}
.m-tabs-primary > li + li  {
  margin-left: -1px;
}
.m-tabs-primary > li > a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 12px 15px 8px;
  border: 1px solid #ccc;
  border-bottom-color: transparent;
  background-color: rgba(0,0,0,0.025);
  color: #666;
  text-decoration: none;
  cursor: pointer;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.m-tabs-primary > li > a:hover,
.m-tabs-primary > li > a:focus {
  background-color: rgba(0,0,0,0.005);
  color: #00f;
}
.m-tabs-primary > li.is-on {
  box-shadow:-4px 0 4px -4px rgba(0,0,0,0.15);
}
.m-tabs-primary > li.is-on > a {
  padding-top: 10px;
  border-top: 3px solid #00f;
  background-color: #fff;
  color: inherit;
  pointer-events: none;
}
.m-tabs-primary > .is-on + li > a {
  box-shadow: 4px 0px 4px -4px rgba(0,0,0,0.15) inset;
}
.m-tabs-primary > li > a:active {
  outline: 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1) inset;
}
.m-tabs-primary > li.is-disabled > a {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* modifier ++++ */
/* fit tab */
.m-tabs-primary.fit > li {
  flex-grow: 1;
}
.m-tabs-primary.fit > li a {
  padding-right: 8px;
  padding-left: 8px;
}
/* large */
.m-tabs-primary.large > li {
  font-size: 1.1428em;
  font-weight: bold;
}
/* extra */
.m-tabs-primary > .extra {
  display: flex;
  align-items: center;
  text-align: left;
}
.m-tabs-primary > .extra:first-child {
  margin-right: auto;
}
.m-tabs-primary > .extra:last-child {
  margin-left: auto;
}

/* tabs secondary +++++++++++++++++++ */
.m-tabs-secondary {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  font-size: 14px;
  text-align: center;
  line-height: 1.2857;
  list-style: none;
  margin-top: -4px;
  margin-right: -4px;
}
/* tab */
.m-tabs-secondary > li {
  display: flex;
  margin-top: 4px;
  margin-right: 4px;
}
.m-tabs-secondary > li > a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 7px 15px 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  background-color: rgba(0,0,0,0.06);
  color: #666;
  text-decoration: none;
  cursor: pointer;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.m-tabs-secondary > li > a:hover,
.m-tabs-secondary > li > a:focus {
  background-color: rgba(0,0,0,0.03);
  color: #00f;
}
.m-tabs-secondary > li.is-on > a {
  border-color: #ddd;
  background-color: transparent;
  color: inherit;
  color: #00f;
  pointer-events: none;
}
.m-tabs-secondary > li > a:active {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1) inset;
}
.m-tabs-primary > li.is-disabled > a {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* modifier ++++ */
/* fit tab */
.m-tabs-secondary.fit > li {
  flex-grow: 1;
}
/* large */
.m-tabs-secondary.large > li {
  font-size: 1.1428em;
  font-weight: bold;
}


/* panel +++++++++++++++++++ */
.m-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px;
  box-shadow: 0 0 0 7px #eee inset,
              0 0 0 8px #ccc inset;
}
.m-panel > .panel-header {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-bottom: 1px solid #ccc;
}
.m-panel > .panel-body {
  flex: 1 1 auto;
  padding: 8px 16px;

}
.m-panel > .panel-footer {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-top: 1px solid #ccc;
}
.m-panel .ttl {
  margin: 0;
}

</style>
</head>
<body>
<div class="sample-width">

<div class="l-flex cols3 gap24">
  <div class="col m-panel">
    <div class="panel-header">
      <p class="ttl">吾輩は猫である</p>
    </div>
    <div class="panel-body">
      <p>名前はまだ無い。</p>
    </div>
    <div class="panel-footer">
      <p>ようやくこの頃知った</p>
    </div>
  </div>
  <div class="col m-panel">
    <div class="panel-header">
      <p class="ttl">吾輩は猫である</p>
    </div>
    <div class="panel-body">
      <p>名前はまだ無い。</p>
    </div>
    <div class="panel-footer">
      <p>ようやくこの頃知った</p>
    </div>
  </div>
  <div class="col m-panel">
    <div class="panel-header">
      <p class="ttl">吾輩は猫である</p>
    </div>
    <div class="panel-body">
      <p>名前はまだ無い。</p>
    </div>
    <div class="panel-footer">
      <p>ようやくこの頃知った</p>
    </div>
  </div>
  <div class="col colspan2 m-panel">
    <div class="panel-header">
      <p class="ttl">吾輩は猫である</p>
    </div>
    <div class="panel-body">
      <p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
    </div>
    <div class="panel-footer">
      <p>ようやくこの頃知った</p>
    </div>
  </div>
  <div class="col m-panel">
    <div class="panel-header">
      <p class="ttl">吾輩は猫である</p>
    </div>
    <div class="panel-body">
      <p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
    </div>
    <div class="panel-footer">
      <p>ようやくこの頃知った</p>
    </div>
  </div>
  <div class="col m-panel">
    <div class="panel-body">
      <p class="ttl">吾輩は猫である</p>
      <p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
    </div>
  </div>
</div>


<ul class="m-tabs-primary">
  <li><a href="#foo">吾輩は猫である</a></li>
  <li class="is-on"><a href="#bar">名前はまだ無い</a></li>
  <li><a href="#baz">どこで生れたか</a></li>
  <li><a href="#qux">とんと見当がつかぬ</a></li>
</ul>

<ul class="m-tabs-primary fit">
  <li><a href="#foo">吾輩は猫である</a></li>
  <li class="is-on"><a href="#bar">名前はまだ無い</a></li>
  <li><a href="#baz">どこで生れたか</a></li>
  <li><a href="#qux">とんと見当がつかぬ</a></li>
</ul>

<ul class="m-tabs-primary fit large">
  <li class="is-on"><a href="#foo">吾輩は猫である</a></li>
  <li><a href="#bar">名前はまだ無い</a></li>
</ul>

<ul class="m-tabs-primary">
  <li><a href="#foo">吾輩は猫である</a></li>
  <li class="is-on"><a href="#bar">名前はまだ無い</a></li>
  <li><a href="#baz">どこで生れたか</a></li>
  <li><a href="#qux">とんと見当がつかぬ</a></li>
  <li class="extra">
    <div><a href="">何でも薄暗い</a></div>
  </li>
</ul>

<ul class="m-tabs-primary">
  <li><a href="#foo">吾輩は猫である</a></li>
  <li class="is-on"><a href="#bar">名前はまだ無い</a></li>
  <li><a href="#baz">どこで生れたか</a></li>
  <li><a href="#qux">とんと見当がつかぬ</a></li>
  <li class="extra">
    <div>
      <a href="">何でも薄暗い</a><br>
      <a href="">じめじめした所で</a>
    </div>
  </li>
</ul>

<ul class="m-tabs-primary fit">
  <li class="tab"><a href="#foo">2018</a></li>
  <li class="tab is-on"><a href="#bar">2017</a></li>
  <li class="tab"><a href="#baz">2016</a></li>
  <li class="tab"><a href="#qux">2015</a></li>
  <li class="tab"><a href="#foo">2014</a></li>
  <li class="tab"><a href="#bar">2013</a></li>
  <li class="tab"><a href="#baz">2012</a></li>
  <li class="tab"><a href="#qux">2011</a></li>
  <li class="tab"><a href="#foo">2010</a></li>
  <li class="tab"><a href="#bar">2009</a></li>
  <li class="tab"><a href="#baz">2008</a></li>
  <li class="tab"><a href="#qux">2007</a></li>
  <li class="tab"><a href="#foo">2016</a></li>
</ul>


<h2>m-tabs-secondary</h2>

<ul class="m-tabs-secondary">
  <li><a href="">吾輩は</a></li>
  <li class="is-on"><a href="">猫である</a></li>
  <li><a href="">名前はまだ無い</a></li>
  <li><a href="">どこで生れたか</a></li>
  <li><a href="">とんと見当がつかぬ</a></li>
  <li><a href="">何でも薄暗い</a></li>
  <li><a href="">じめじめした所で</a></li>
  <li><a href="">ニャーニャー</a></li>
  <li><a href="">泣いていた事だけは</a></li>
  <li><a href="">記憶している</a></li>
</ul>


<ul class="m-tabs-secondary fit">
  <li><a href="">吾輩は</a></li>
  <li class="is-on"><a href="">猫である</a></li>
  <li><a href="">名前はまだ無い</a></li>
  <li><a href="">どこで生れたか</a></li>
  <li><a href="">とんと見当がつかぬ</a></li>
  <li><a href="">何でも薄暗い</a></li>
  <li><a href="">じめじめした所で</a></li>
  <li><a href="">ニャーニャー</a></li>
  <li><a href="">泣いていた事だけは</a></li>
  <li><a href="">記憶している</a></li>
</ul>

</div>
</body>
</html>
```

追記：少しグリッド幅を整理しました。

```css
.l-flex > .full,
.l-flex.cols2 > .col2,
.l-flex.cols3 > .col3,
.l-flex.cols4 > .col4,
.l-flex.cols5 > .col5,
.l-flex.cols6 > .col6 {
  width: 100%;
}
.l-flex.cols6 > .col5 {
  width: calc(100% * (5 / 6));
}
.l-flex.cols5 > .col4 {
  width: calc(100% * (4 / 5));
}
.l-flex.cols4 > .col3 {
  width: calc(100% * (3 / 4));
}
.l-flex.cols3 > .col2,
.l-flex.cols6 > .col4 {
  width: calc(100% * (2 / 3));
}
.l-flex.cols5 > .col3 {
  width: calc(100% * (3 / 5));
}
.l-flex.cols2 > .col,
.l-flex.cols4 > .col2,
.l-flex.cols6 > .col3 {
  width: calc(100% * (1 / 2));
}
.l-flex.cols5 > .col2 {
  width: calc(100% * (2 / 5));
}
.l-flex.cols3 > .col,
.l-flex.cols6 > .col2 {
  width: calc(100% * (1 / 3));
}
.l-flex.cols4 > .col {
  width: calc(100% * (1 / 4));
}
.l-flex.cols5 > .col {
  width: calc(100% * (1 / 5));
}
.l-flex.cols6 > .col {
  width: calc(100% * (1 / 6));
}
/* gap4 */
.l-flex.gap4 > .full,
.l-flex.gap4.cols2 > .col2,
.l-flex.gap4.cols3 > .col3,
.l-flex.gap4.cols4 > .col4,
.l-flex.gap4.cols5 > .col5,
.l-flex.gap4.cols6 > .col6,
.l-flex.gapx4.cols2 > .col2,
.l-flex.gapx4.cols3 > .col3,
.l-flex.gapx4.cols4 > .col4,
.l-flex.gapx4.cols5 > .col5,
.l-flex.gapx4.cols6 > .col6 {
  width: calc(100% - 4px);
}
.l-flex.gap4.cols6 > .col5,
.l-flex.gapx4.cols6 > .col5 {
  width: calc((100% * (5 / 6)) - 4px);
}
.l-flex.gap4.cols5 > .col4,
.l-flex.gapx4.cols5 > .col4 {
  width: calc((100% * (4 / 5)) - 4px);
}
.l-flex.gap4.cols4 > .col3,
.l-flex.gapx4.cols4 > .col3 {
  width: calc((100% * (3 / 4)) - 4px);
}
.l-flex.gap4.cols3 > .col2,
.l-flex.gap4.cols6 > .col4,
.l-flex.gapx4.cols3 > .col2,
.l-flex.gapx4.cols6 > .col4 {
  width: calc((100% * (2 / 3)) - 4px);
}
.l-flex.gap4.cols5 > .col3,
.l-flex.gapx4.cols5 > .col3 {
  width: calc((100% * (3 / 5)) - 4px);
}
.l-flex.gap4.cols2 > .col,
.l-flex.gap4.cols4 > .col2,
.l-flex.gap4.cols6 > .col3,
.l-flex.gapx4.cols2 > .col,
.l-flex.gapx4.cols4 > .col2,
.l-flex.gapx4.cols6 > .col3{
  width: calc((100% * (1 / 2)) - 4px);
}
.l-flex.gap4.cols5 > .col2,
.l-flex.gapx4.cols5 > .col2 {
  width: calc((100% * (2 / 5)) - 4px);
}
.l-flex.gap4.cols3 > .col,
.l-flex.gap4.cols6 > .col2,
.l-flex.gapx4.cols3 > .col,
.l-flex.gapx4.cols6 > .col2 {
  width: calc((100% * (1 / 3)) - 4px);
}
.l-flex.gap4.cols4 > .col,
.l-flex.gapx4.cols4 > .col {
  width: calc((100% * (1 / 4)) - 4px);
}
.l-flex.gap4.cols5 > .col,
.l-flex.gapx4.cols5 > .col {
  width: calc((100% * (1 / 5)) - 4px);
}
.l-flex.gap4.cols6 > .col,
.l-flex.gapx4.cols6 > .col {
  width: calc((100% * (1 / 6)) - 4px);
}
/* gap8 */
.l-flex.gap8 > .full,
.l-flex.gap8.cols2 > .col2,
.l-flex.gap8.cols3 > .col3,
.l-flex.gap8.cols4 > .col4,
.l-flex.gap8.cols5 > .col5,
.l-flex.gap8.cols6 > .col6,
.l-flex.gapx8.cols2 > .col2,
.l-flex.gapx8.cols3 > .col3,
.l-flex.gapx8.cols4 > .col4,
.l-flex.gapx8.cols5 > .col5,
.l-flex.gapx8.cols6 > .col6 {
  width: calc(100% - 8px);
}
.l-flex.gap8.cols6 > .col5,
.l-flex.gapx8.cols6 > .col5 {
  width: calc((100% * (5 / 6)) - 8px);
}
.l-flex.gap8.cols5 > .col4,
.l-flex.gapx8.cols5 > .col4 {
  width: calc((100% * (4 / 5)) - 8px);
}
.l-flex.gap8.cols4 > .col3,
.l-flex.gapx8.cols4 > .col3 {
  width: calc((100% * (3 / 4)) - 8px);
}
.l-flex.gap8.cols3 > .col2,
.l-flex.gap8.cols6 > .col4,
.l-flex.gapx8.cols3 > .col2,
.l-flex.gapx8.cols6 > .col4 {
  width: calc((100% * (2 / 3)) - 8px);
}
.l-flex.gap8.cols5 > .col3,
.l-flex.gapx8.cols5 > .col3 {
  width: calc((100% * (3 / 5)) - 8px);
}
.l-flex.gap8.cols2 > .col,
.l-flex.gap8.cols4 > .col2,
.l-flex.gap8.cols6 > .col3,
.l-flex.gapx8.cols2 > .col,
.l-flex.gapx8.cols4 > .col2,
.l-flex.gapx8.cols6 > .col3{
  width: calc((100% * (1 / 2)) - 8px);
}
.l-flex.gap8.cols5 > .col2,
.l-flex.gapx8.cols5 > .col2 {
  width: calc((100% * (2 / 5)) - 8px);
}
.l-flex.gap8.cols3 > .col,
.l-flex.gap8.cols6 > .col2,
.l-flex.gapx8.cols3 > .col,
.l-flex.gapx8.cols6 > .col2 {
  width: calc((100% * (1 / 3)) - 8px);
}
.l-flex.gap8.cols4 > .col,
.l-flex.gapx8.cols4 > .col {
  width: calc((100% * (1 / 4)) - 8px);
}
.l-flex.gap8.cols5 > .col,
.l-flex.gapx8.cols5 > .col {
  width: calc((100% * (1 / 5)) - 8px);
}
.l-flex.gap8.cols6 > .col,
.l-flex.gapx8.cols6 > .col {
  width: calc((100% * (1 / 6)) - 8px);
}
/* gap12 */
.l-flex.gap12 > .full,
.l-flex.gap12.cols2 > .col2,
.l-flex.gap12.cols3 > .col3,
.l-flex.gap12.cols4 > .col4,
.l-flex.gap12.cols5 > .col5,
.l-flex.gap12.cols6 > .col6,
.l-flex.gapx12.cols2 > .col2,
.l-flex.gapx12.cols3 > .col3,
.l-flex.gapx12.cols4 > .col4,
.l-flex.gapx12.cols5 > .col5,
.l-flex.gapx12.cols6 > .col6 {
  width: calc(100% - 12px);
}
.l-flex.gap12.cols6 > .col5,
.l-flex.gapx12.cols6 > .col5 {
  width: calc((100% * (5 / 6)) - 12px);
}
.l-flex.gap12.cols5 > .col4,
.l-flex.gapx12.cols5 > .col4 {
  width: calc((100% * (4 / 5)) - 12px);
}
.l-flex.gap12.cols4 > .col3,
.l-flex.gapx12.cols4 > .col3 {
  width: calc((100% * (3 / 4)) - 12px);
}
.l-flex.gap12.cols3 > .col2,
.l-flex.gap12.cols6 > .col4,
.l-flex.gapx12.cols3 > .col2,
.l-flex.gapx12.cols6 > .col4 {
  width: calc((100% * (2 / 3)) - 12px);
}
.l-flex.gap12.cols5 > .col3,
.l-flex.gapx12.cols5 > .col3 {
  width: calc((100% * (3 / 5)) - 12px);
}
.l-flex.gap12.cols2 > .col,
.l-flex.gap12.cols4 > .col2,
.l-flex.gap12.cols6 > .col3,
.l-flex.gapx12.cols2 > .col,
.l-flex.gapx12.cols4 > .col2,
.l-flex.gapx12.cols6 > .col3{
  width: calc((100% * (1 / 2)) - 12px);
}
.l-flex.gap12.cols5 > .col2,
.l-flex.gapx12.cols5 > .col2 {
  width: calc((100% * (2 / 5)) - 12px);
}
.l-flex.gap12.cols3 > .col,
.l-flex.gap12.cols6 > .col2,
.l-flex.gapx12.cols3 > .col,
.l-flex.gapx12.cols6 > .col2 {
  width: calc((100% * (1 / 3)) - 12px);
}
.l-flex.gap12.cols4 > .col,
.l-flex.gapx12.cols4 > .col {
  width: calc((100% * (1 / 4)) - 12px);
}
.l-flex.gap12.cols5 > .col,
.l-flex.gapx12.cols5 > .col {
  width: calc((100% * (1 / 5)) - 12px);
}
.l-flex.gap12.cols6 > .col,
.l-flex.gapx12.cols6 > .col {
  width: calc((100% * (1 / 6)) - 12px);
}
/* gap16 */
.l-flex.gap16 > .full,
.l-flex.gap16.cols2 > .col2,
.l-flex.gap16.cols3 > .col3,
.l-flex.gap16.cols4 > .col4,
.l-flex.gap16.cols5 > .col5,
.l-flex.gap16.cols6 > .col6,
.l-flex.gapx16.cols2 > .col2,
.l-flex.gapx16.cols3 > .col3,
.l-flex.gapx16.cols4 > .col4,
.l-flex.gapx16.cols5 > .col5,
.l-flex.gapx16.cols6 > .col6 {
  width: calc(100% - 16px);
}
.l-flex.gap16.cols6 > .col5,
.l-flex.gapx16.cols6 > .col5 {
  width: calc((100% * (5 / 6)) - 16px);
}
.l-flex.gap16.cols5 > .col4,
.l-flex.gapx16.cols5 > .col4 {
  width: calc((100% * (4 / 5)) - 16px);
}
.l-flex.gap16.cols4 > .col3,
.l-flex.gapx16.cols4 > .col3 {
  width: calc((100% * (3 / 4)) - 16px);
}
.l-flex.gap16.cols3 > .col2,
.l-flex.gap16.cols6 > .col4,
.l-flex.gapx16.cols3 > .col2,
.l-flex.gapx16.cols6 > .col4 {
  width: calc((100% * (2 / 3)) - 16px);
}
.l-flex.gap16.cols5 > .col3,
.l-flex.gapx16.cols5 > .col3 {
  width: calc((100% * (3 / 5)) - 16px);
}
.l-flex.gap16.cols2 > .col,
.l-flex.gap16.cols4 > .col2,
.l-flex.gap16.cols6 > .col3,
.l-flex.gapx16.cols2 > .col,
.l-flex.gapx16.cols4 > .col2,
.l-flex.gapx16.cols6 > .col3{
  width: calc((100% * (1 / 2)) - 16px);
}
.l-flex.gap16.cols5 > .col2,
.l-flex.gapx16.cols5 > .col2 {
  width: calc((100% * (2 / 5)) - 16px);
}
.l-flex.gap16.cols3 > .col,
.l-flex.gap16.cols6 > .col2,
.l-flex.gapx16.cols3 > .col,
.l-flex.gapx16.cols6 > .col2 {
  width: calc((100% * (1 / 3)) - 16px);
}
.l-flex.gap16.cols4 > .col,
.l-flex.gapx16.cols4 > .col {
  width: calc((100% * (1 / 4)) - 16px);
}
.l-flex.gap16.cols5 > .col,
.l-flex.gapx16.cols5 > .col {
  width: calc((100% * (1 / 5)) - 16px);
}
.l-flex.gap16.cols6 > .col,
.l-flex.gapx16.cols6 > .col {
  width: calc((100% * (1 / 6)) - 16px);
}
/* gap24 */
.l-flex.gap24 > .full,
.l-flex.gap24.cols2 > .col2,
.l-flex.gap24.cols3 > .col3,
.l-flex.gap24.cols4 > .col4,
.l-flex.gap24.cols5 > .col5,
.l-flex.gap24.cols6 > .col6,
.l-flex.gapx24.cols2 > .col2,
.l-flex.gapx24.cols3 > .col3,
.l-flex.gapx24.cols4 > .col4,
.l-flex.gapx24.cols5 > .col5,
.l-flex.gapx24.cols6 > .col6 {
  width: calc(100% - 24px);
}
.l-flex.gap24.cols6 > .col5,
.l-flex.gapx24.cols6 > .col5 {
  width: calc((100% * (5 / 6)) - 24px);
}
.l-flex.gap24.cols5 > .col4,
.l-flex.gapx24.cols5 > .col4 {
  width: calc((100% * (4 / 5)) - 24px);
}
.l-flex.gap24.cols4 > .col3,
.l-flex.gapx24.cols4 > .col3 {
  width: calc((100% * (3 / 4)) - 24px);
}
.l-flex.gap24.cols3 > .col2,
.l-flex.gap24.cols6 > .col4,
.l-flex.gapx24.cols3 > .col2,
.l-flex.gapx24.cols6 > .col4 {
  width: calc((100% * (2 / 3)) - 24px);
}
.l-flex.gap24.cols5 > .col3,
.l-flex.gapx24.cols5 > .col3 {
  width: calc((100% * (3 / 5)) - 24px);
}
.l-flex.gap24.cols2 > .col,
.l-flex.gap24.cols4 > .col2,
.l-flex.gap24.cols6 > .col3,
.l-flex.gapx24.cols2 > .col,
.l-flex.gapx24.cols4 > .col2,
.l-flex.gapx24.cols6 > .col3{
  width: calc((100% * (1 / 2)) - 24px);
}
.l-flex.gap24.cols5 > .col2,
.l-flex.gapx24.cols5 > .col2 {
  width: calc((100% * (2 / 5)) - 24px);
}
.l-flex.gap24.cols3 > .col,
.l-flex.gap24.cols6 > .col2,
.l-flex.gapx24.cols3 > .col,
.l-flex.gapx24.cols6 > .col2 {
  width: calc((100% * (1 / 3)) - 24px);
}
.l-flex.gap24.cols4 > .col,
.l-flex.gapx24.cols4 > .col {
  width: calc((100% * (1 / 4)) - 24px);
}
.l-flex.gap24.cols5 > .col,
.l-flex.gapx24.cols5 > .col {
  width: calc((100% * (1 / 5)) - 24px);
}
.l-flex.gap24.cols6 > .col,
.l-flex.gapx24.cols6 > .col {
  width: calc((100% * (1 / 6)) - 24px);
}
```