.w-100 {
    width: 100%;
}
.w-50 {
    width: 50%;
}
.w-25 {
    width: 25%;
}
.h-100 {
    height: 100%;
}

.flex {
    display: flex;
}

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

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

.just-c {
    justify-content: center;
}
.just-s {
    justify-content: flex-start;
}
.just-e {
    justify-content: flex-end;
}
.just-s-b {
    justify-content: space-between;
}
.just-s-a {
    justify-content: space-around;
}

.al-c {
    align-items: center;
}
.al-s {
    align-items: flex-start;
}
.al-e {
    align-items: flex-end;
}
.al-s {
    align-items: stretch;
}

.p-20 { padding: 20px }



/* .p-10 { padding: 10px }

.px-10 { padding: 0 10px }
.px-20 { padding: 0 20px }
.py-10 { padding: 10px 0 }
.py-20 { padding: 20px 0 }
.pt-10 { padding-top: 10px }
.pt-20 { padding-top: 20px }
.pb-10 { padding-bottom: 10px }
.pb-20 { padding-bottom: 20px }
.pl-10 { padding-left: 10px }
.pr-20 { padding-left: 20px }
.pl-10 { padding-right: 10px }
.pl-20 { padding-right: 20px } */