/* flex container */
/* row */
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-row.wrap {
    flex-wrap: wrap;
}

.flex-row.wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-row.reverse {
    flex-direction: row-reverse;
}



/* column */
.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-col.reverse {
    flex-direction: column-reverse;
}

/* align */
.flex-row.h-left,
.flex-col.v-top {
    justify-content: flex-start;
}

.flex-row.h-center,
.flex-col.v-center {
    justify-content: center;
}

.flex-row.h-right,
.flex-col.v-bottom {
    justify-content: flex-end;
}

.flex-row.h-around,
.flex-col.v-around {
    justify-content: space-around;
}

.flex-row.h-between,
.flex-col.v-between {
    justify-content: space-between;
}

.flex-row.h-evenly,
.flex-col.v-evenly {
    justify-content: space-evenly;
}

.flex-row.v-top,
.flex-col.h-left {
    align-items: flex-start;
}

.flex-row.v-center,
.flex-col.h-center {
    align-items: center;
}

.flex-row.v-bottom,
.flex-col.h-right {
    align-items: flex-end;
}

/* flex gap */

.gap-v.xs {
    row-gap: 0.5rem;
}

.gap-v.sm {
    row-gap: 0.75rem;
}

.gap-v.md {
    row-gap: 1rem;
}

.gap-v.lg {
    row-gap: 1.25rem;
}

.gap-v.xl {
    row-gap: 1.5rem;
}

.gap-h.xs {
    column-gap: 0.25rem;
}

.gap-h.sm {
    column-gap: 0.5rem;
}

.gap-h.md {
    column-gap: 1rem;
}

.gap-h.lg {
    column-gap: 1.25rem;
}

.gap-h.xl {
    column-gap: 1.5rem;
}

/* flex container -- end */
/* flex items */

/* 
  flex 아이템의 크기는 1을 100%로 한다.
  flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성. default: 0;
    *** flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율
  flex-basis는 Flex 아이템의 기본 크기(flex-direction이 row일 때는 너비, column일 때는 높이). default: auto
    *** 순수한 아이템의 너비이므로, width의 영향을 받는다.
  flex-shrink는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성.
    *** 
  */
.flex-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.flex-auto {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item.tenth {
    flex: 1 1 10%;
}

.flex-item.quarter {
    flex: 1 1 25%;
}

.flex-item.third {
    flex: 1 1 33.3333%;
}

.flex-item.half {
    flex: 1 1 50%;
}

.flex-item.th-quarter {
    flex: 1 1 75%;
}

.flex-item.full {
    flex: 1 1 100%;
}

/* flex items -- end */



/* flex responsive */

@media screen and (min-width: 320px) and (max-width:767px) {
    .flex-row.mobile {
        flex-direction: column;
    }

    .flex-col.mobile {
        flex-direction: row;
    }
}

@media screen and (min-width: 768px) and (max-width:1439px) {
    .flex-row.tablet {
        flex-direction: column;
    }

    .flex-col.tablet {
        flex-direction: row;
    }
}

@media screen and (min-width: 1024px) and (max-width:1439px) {
    .flex-row.laptop {
        flex-direction: column;
    }

    .flex-col.laptop {
        flex-direction: row;
    }
}

@media screen and (min-width: 1440px) {
    .flex-row.desktop {
        flex-direction: column;
    }

    .flex-col.desktop {
        flex-direction: row;
    }
}

/* wearable */
@media all and (min-width: 280px) and (max-width: 359px) {}

/* mobile  */
@media all and (min-width: 320px) {}

/* mobile large & tablet */
@media all and (min-width: 768px) {}

/* laptop */
@media all and (min-width: 1024px) {}

/* desktop */
@media all and (min-width: 1440px) {}