/* Grid */

/* .row {} ??? */
.grid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.grid--top {
  align-items: flex-start;
}

.grid--bottom {
  align-items: flex-end;
}

.grid--center {
  align-items: center;
}

/* Cell */

.grid-cell {
    flex: 1;
}

.grid--flexcells > .grid-cell {
    display: flex;
}

.grid-cell--top {
  align-self: flex-start;
}

.grid-cell--bottom {
  align-self: flex-end;
}

.grid-cell--center {
  align-self: center;
}

.grid-cell--autosize {
  flex: none;
}

.grid-cell--non-shrink {
    flex: 0 0 auto;
}

.grid-cell--basis-auto {
    flex-basis: auto;
}

.grid-cell--order-0 {order: 0;}
.grid-cell--order-1 {order: 1;}
.grid-cell--order-2 {order: 2;}
.grid-cell--order-3 {order: 3;}
.grid-cell--order-4 {order: 4;}
.grid-cell--order-5 {order: 5;}

/* Grid > Cell */

.grid--fit > .grid-cell {
  flex: 1;
}

.grid--full > .grid-cell {
  flex: 0 0 100%;
}

.grid--2 > .grid-cell {
  flex: 0 0 50%;
}

.grid--3 > .grid-cell {
  flex: 0 0 33.3333%;
}

.grid--4 > .grid-cell {
  flex: 0 0 25%;
}

.grid--place {
    justify-content: space-between;
}
.grid--place > .grid-cell {
    flex: none;
}

.grid--place-center {
    justify-content: center;
}
.grid--place-center > .grid-cell {
    flex: none;
}

.grid--left {
    justify-content: flex-start;
}
.grid--left > .grid-cell {
    flex: 0 1 auto;
}

.grid--right {
    justify-content: flex-end;
}
.grid--right > .grid-cell {
    flex: 0 1 auto;
}

/* --break-sm */
/* for mobile phones */
@media (min-width:384px) {
    .small-grid-cell--order-0 {order: 0;}
    .small-grid-cell--order-1 {order: 1;}
    .small-grid-cell--order-2 {order: 2;}
    .small-grid-cell--order-3 {order: 3;}
    .small-grid-cell--order-4 {order: 4;}
    .small-grid-cell--order-5 {order: 5;}

    .small-grid--fit > .grid-cell {
        flex: 1;
    }
    .small-grid--full > .grid-cell {
        flex: 0 0 100%;
    }
    .small-grid--place {
        justify-content: space-between;
    }
    .small-grid--place > .grid-cell {
        flex: none;
    }
    .small-grid--place-center {
        justify-content: center;
    }
    .small-grid--place-center > .grid-cell {
        flex: none;
    }
    .small-grid--2 > .grid-cell {
        flex: 0 0 50%;
    }
    .small-grid--3 > .grid-cell {
        flex: 0 0 33.3333%;
    }
    .small-grid--4 > .grid-cell {
        flex: 0 0 25%;
    }
}

/* --break-md */
/* for tablets */
@media (min-width:576px) {
    .med-grid-cell--order-0 {order: 0;}
    .med-grid-cell--order-1 {order: 1;}
    .med-grid-cell--order-2 {order: 2;}
    .med-grid-cell--order-3 {order: 3;}
    .med-grid-cell--order-4 {order: 4;}
    .med-grid-cell--order-5 {order: 5;}

    .med-grid--fit > .grid-cell {
        flex: 1;
    }
    .med-grid--full > .grid-cell {
        flex: 0 0 100%;
    }
    .med-grid--place {
        justify-content: space-between;
    }
    .med-grid--place > .grid-cell {
        flex: none;
    }
    .med-grid--place-center {
        justify-content: center;
    }
    .med-grid--place-center > .grid-cell {
        flex: none;
    }
    .med-grid--2 > .grid-cell {
        flex: 0 0 50%;
    }
    .med-grid--3 > .grid-cell {
        flex: 0 0 33.3333%;
    }
    .med-grid--4 > .grid-cell {
        flex: 0 0 25%;
    }
}

/* (--break-lg */
/* for desktop */
@media (min-width:768px) {
    .large-grid-cell--order-0 {order: 0;}
    .large-grid-cell--order-1 {order: 1;}
    .large-grid-cell--order-2 {order: 2;}
    .large-grid-cell--order-3 {order: 3;}
    .large-grid-cell--order-4 {order: 4;}
    .large-grid-cell--order-5 {order: 5;}

    .large-grid--fit > .grid-cell {
        flex: 1;
    }
    .large-grid--full > .grid-cell {
        flex: 0 0 100%;
    }
    .large-grid--place {
        justify-content: space-between;
    }
    .large-grid--place > .grid-cell {
        flex: none;
    }
    .large-grid--place-center {
        justify-content: center;
    }
    .large-grid--place-center > .grid-cell {
        flex: none;
    }
    .large-grid--2 > .grid-cell {
        flex: 0 0 50%;
    }
    .large-grid--3 > .grid-cell {
        flex: 0 0 33.3333%;
    }
    .large-grid--4 > .grid-cell {
        flex: 0 0 25%;
    }
    /* column*/
    .large-column {
        flex-direction: column;
    }
}

/* --break-sm */
/* for mobile phones */
@media (min-width:384px) {
}

/* --break-md */
/* for tablets */
@media (min-width:576px) {
}

/* --break-lg */
/* for desktop */
@media (min-width:768px) {
}

/* column */
.column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    align-items: center;
}

/* vertical alignment*/
.column--top {
    justify-content: flex-start;
}

.column--bottom {
    justify-content: flex-end;
}

.column--center {
    justify-content: center;
}