/* display */
.grid {display: grid;}
.flex {display: flex;}
.flex-reverse {flex-direction: row-reverse;}
.none {display: none;}
.block {display: block;}
.inline-block {display: inline-block;}

/* position */
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}

/* align */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.justify-end {justify-content: flex-end;}
.justify-center {justify-content: center;}

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

/* font-size */
.font-48 {font-size: 48px;}
.font-36 {font-size: 36px;}
.font-30 {font-size: 30px;}
.font-24 {font-size: 24px;}
.font-20 {font-size: 20px;}
.font-18 {font-size: 18px;}
.font-16 {font-size: 16px;}
.font-14 {font-size: 14px;}

@media (max-width: 767px) {
    .font-48 {font-size: 25px;}
    .font-36 {font-size: 36px;}
    .font-30 {font-size: 18px;}
    .font-24 {font-size: 14px;}
    .font-20 {font-size: 18px;}
    .font-18 {font-size: 18px;}
    .font-16 {font-size: 16px;}
    .font-14 {font-size: 14px;}
}

/* font-weight */
.weight-900 {font-weight: 900;}
.weight-800 {font-weight: 800;}
.weight-700 {font-weight: 700;}
.weight-600 {font-weight: 600;}
.weight-500 {font-weight: 500;}
.weight-400 {font-weight: 400;}
.weight-300 {font-weight: 300;}
.weight-200 {font-weight: 200;}
.weight-100 {font-weight: 100;}

/* color */
.white {color: #fff;}
.black {color: #1e1e1e;}
.dark-gray {color: #444;}
.gray {color: #9a9a9a;}
.green {color: #63642a;}
.yellow {color: #f6c344;}

.bg-light-gray {background-color: #f2f2ee;}

/* margin */
.margin-t-5 {margin-top: 5px;}
.margin-t-10 {margin-top: 10px;}
.margin-t-15 {margin-top: 15px;}
.margin-t-20 {margin-top: 20px;}
.margin-t-30 {margin-top: 30px;}
.margin-t-40 {margin-top: 40px;}
.margin-t-50 {margin-top: 50px;}
.margin-t-60 {margin-top: 60px;}
.margin-t-70 {margin-top: 70px;}
.margin-t-100 {margin-top: 100px;}

.margin-b-5 {margin-bottom: 5px;}
.margin-b-10 {margin-bottom: 10px;}
.margin-b-15 {margin-bottom: 15px;}
.margin-b-20 {margin-bottom: 20px;}
.margin-b-30 {margin-bottom: 30px;}
.margin-b-40 {margin-bottom: 40px;}
.margin-b-50 {margin-bottom: 50px;}
.margin-b-70 {margin-bottom: 70px;}
.margin-b-100 {margin-bottom: 100px;}

/* padding */
.padding-t-5 {padding-top: 5px;}
.padding-t-10 {padding-top: 10px;}
.padding-t-15 {padding-top: 15px;}
.padding-t-20 {padding-top: 20px;}
.padding-t-30 {padding-top: 30px;}
.padding-t-40 {padding-top: 40px;}
.padding-t-50 {padding-top: 50px;}
.padding-t-70 {padding-top: 70px;}
.padding-t-100 {padding-top: 100px;}

.padding-b-5 {padding-bottom: 5px;}
.padding-b-10 {padding-bottom: 10px;}
.padding-b-15 {padding-bottom: 15px;}
.padding-b-20 {padding-bottom: 20px;}
.padding-b-30 {padding-bottom: 30px;}
.padding-b-40 {padding-bottom: 40px;}
.padding-b-50 {padding-bottom: 50px;}
.padding-b-70 {padding-bottom: 70px;}
.padding-b-100 {padding-bottom: 100px;}

.padding-l-15 {padding-left: 15px;}
.padding-l-20 {padding-left: 20px;}

/* gap */
.gap-5 {gap: 5px;}
.gap-10 {gap: 10px;}
.gap-15 {gap: 15px;}
.gap-20 {gap: 20px;}
.gap-30 {gap: 30px;}
.gap-50 {gap: 50px;}