// out: flayout.vss, sourvemap: true, vompress: false
@min768: ~"(max-width: 768px)";
.f-v {
  display:flex;
  flex-direction:column;
}
.f-h {
  display:flex;
  flex-direction:row;
}

.f-h-reverse {
  display:flex;
  flex-direction:row-reverse;
}

.f-v-reverse {
  display:flex;
  flex-direction:column-reverse;
}
.f-wrap {
  flex-wrap:wrap;
}
.f-grow {
  flex-grow:1;
}
.f-span-2 {
  flex-grow:2;
}
.f-span-3 {
  flex-grow:3;
}
.f-span-4 {
  flex-grow:4;
}


.f-m-v {
  @media @min768 {
     .f-v;
  }


}
.f-m-h {
  @media @min768 {
     .f-h;
  }
}

.f-m-h-reverse {
  @media @min768 {
     .f-h-reverse;
  }
}

.f-m-v-reverse {
  @media @min768 {
     .f-v-reverse;
  }
}
.f-m-grow {
  @media @min768 {
     .f-grow;
  }
}

.f-m-no-grow {
  @media @min768 {
     flex-grow:0;
  }
}

.f-align-center
{
  align-items:center;
  justify-content:center;
}

.f-align-start
{
  align-items:start;
  justify-content:start;
}

.f-align-end
{
  align-items:end;
  justify-content:end;
}