/* -----display flex resources----- */
.flex{
    display: flex;
}
.flex-no-wrap{
    display: flex;
    flex-wrap: nowrap;
}
.flex-justify-content-100{
    justify-content: left;
}
.flex-justify-content-010{
    justify-content: center;
    align-items: center;
}
.flex-justify-content-001{
    justify-content: right;
}
.flex-justify-content-100{
    justify-content: left;
}
.justify-content-110{
    justify-content: space-around;
}
.flex-align-items-100{
    align-items: left;
}
.flex-align-items-010{
    align-items: center;
}
.flex-align-items-001{
    align-items: right;
}
.gap-15px{
    gap: 15px;
}
.gap-1rem{
    gap: 1rem;
}
.wrap{
    flex-wrap: wrap;
}
.flex-item-width50cent{
    width: 50%;
}
.flex-item-basis50{
    flex-basis: 50%;
}
/* -----end display flex resources----- */

/* -----display grid resources----- */
.grid-min-200px{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-min-100px{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}
.grid-50{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}
/* -----end display grid resources----- */

/* -----display: inline-block----- */
.display-inline-block{
    display: inline-block;
}
/* -----end display: inline-block----- */

/* -----padding----- */
.padding-2rem{
    padding: 2rem;
}
.padding-lr-2rem{
    padding: 0 2rem;
}
.padding-tb-2rem{
    padding: 2rem 0;
}
.padding-4rem{
    padding: 4rem;
}
.padding-lr-4rem{
    padding: 0 4rem;
}
.padding-tb-4rem{
    padding: 4rem 0;
}
.padding-6rem{
    padding: 6rem;
}
.padding-tb-2rem{
    padding: 2rem 0;
}
.padding-1rem{
    padding: 1rem;
}
.padding-15px{
    padding: 15px;
}
.padding-lr-15px{
    padding: 0 15px;
}
.padding-tb-15px{
    padding: 15px 0;
}
.padding-10rem{
    padding: 10rem;
}
/* -----end padding----- */
/* -----margin----- */
.margin-auto{
    margin: auto;
}
.margin-lr-auto{
    margin: 0 auto;
}
.margin-tb-auto{
    margin: auto 0;
}
.margin-15px{
    margin: 15px;
}
.margin-b-15px{
    margin-bottom: 15px;
}
.margin-t-15px{
    margin-top: 15px;
}
.margin-r-15px{
    margin-right: 15px;
}
.margin-l-15px{
    margin-left: 15px;
}
.margin-tb-15px{
    margin: 15px 0;
}
.margin-lr-15px{
    margin: 0 15px;
}
/* -----end margin----- */
/* ------text align------ */
.text-align-100{
    text-align: left;
}
.text-align-010{
    text-align: center;
}
.text-align-001{
    text-align: right;
}
/* ------end text align------ */
@media all and (max-width:768px){
    .flex{
        flex-direction: column;
    }
    .padding-1rem{
        padding: 0.5rem;
    }
    .padding-2rem{
        padding: 1rem;
    }
    .padding-4rem{
        padding: 2rem;
    }
    .padding-lr-4rem{
        padding: 0 2rem;
    }
    .padding-6rem{
        padding: 3rem;
    }
    .padding-10rem{
        padding: 5rem;
    }
    .gap-1rem{
        gap: 0.5rem;
    }
    .flex-item-width50cent{
        width: 100%;
    }
    .flex-item-basis50{
        flex-basis: 1;
    }
}
@media all and (max-width:550px){
    .padding-2rem{
        padding: 0.75rem;
    }
    .padding-4rem{
        padding: 1rem;
    }
    .padding-6rem{
        padding: 1.5rem;
    }
    .padding-lr-4rem{
        padding: 0 1rem;
    }
    .padding-10rem{
        padding: 2.5rem;
    }
}