.r {
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex-direction: row; }
  .r .c1 {
    flex-basis: calc((100% + 10px) / (12 / 1) - 10px); }
  .r .c2 {
    flex-basis: calc((100% + 10px) / (12 / 2) - 10px); }
  .r .c3 {
    flex-basis: calc((100% + 10px) / (12 / 3) - 10px); }
  .r .c4 {
    flex-basis: calc((100% + 10px) / (12 / 4) - 10px); }
  .r .c5 {
    flex-basis: calc((100% + 10px) / (12 / 5) - 10px); }
  .r .c6 {
    flex-basis: calc((100% + 10px) / (12 / 6) - 10px); }
  .r .c7 {
    flex-basis: calc((100% + 10px) / (12 / 7) - 10px); }
  .r .c8 {
    flex-basis: calc((100% + 10px) / (12 / 8) - 10px); }
  .r .c9 {
    flex-basis: calc((100% + 10px) / (12 / 9) - 10px); }
  .r .c10 {
    flex-basis: calc((100% + 10px) / (12 / 10) - 10px); }
  .r .c11 {
    flex-basis: calc((100% + 10px) / (12 / 11) - 10px); }
  .r .c12 {
    flex-basis: calc((100% + 10px) / (12 / 12) - 10px); }